4

我正在学习Angular2 RC5Angular2 材质库并让它在AspNetCore 1.0应用程序中运行，VisualStudio 2015.我使用了一个完美运行的Angular2 RC5单页应用程序并尝试引入延迟加载，其中只有登录页面会首先加载。成功登录后，我想加载剩余的页面。

当我在 SPA 模式下单击登录按钮时，我会成功重定向到预加载登录页面的 DashboardComponent 页面——那是在我引入延迟加载之前。遵循本教程后，我现在收到这些错误

错误片段

EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't bind      to 'ngIf' since it isn't a known property of 'md-card-title'.
1. If 'md-card-title' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.
2. If 'md-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.  ("


        <md-card-title [ERROR ->]*ngIf="!showMessage && !isApproved">
            Please use the information below...
        </md-card-title> "): ReportListComponent@63:23 Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("

为什么 ngIf 指令突然不起作用？在我移动仪表板以延迟加载登录成功之前，它正在工作。

我一直在使用上面发布的链接中的共享模块方法。不使用共享模块是导致此问题的原因吗？我认为模块共享是一种清理代码的方法，一旦一切正常，就不会重复内容，仅此而已。

我的 Dashboard 类似于我在上面关注的链接中的 HeroesList 页面，在加载 DashboardModule 的那一刻，它会加载更多页面。我在 MVC 端的仪表板页面中放置了断点，并确认仪表板和之后的页面仅在成功登录时才会延迟加载。

该错误似乎无法获取核心角度参考和/或 angular2 材料库的参考。我已将此处列出的所有这些导入放入所有包含它们的模块中，而不是路由模块

import { NgModule }         from '@angular/core';
import { FormsModule } from '@angular/forms';

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }    from '@angular/http';
import { RouterModule } from '@angular/router';

import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';

我仍然收到上面代码段中的错误。我能错过什么？任何帮助或提示表示赞赏。

编辑

仪表板.Module.ts

import { NgModule }         from '@angular/core';
import { CommonModule }     from '@angular/common';
import { FormsModule } from '@angular/forms';


import { HttpModule }    from '@angular/http';
import { RouterModule } from '@angular/router';

import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';

import { AppService } from './app.service';

import { DashboardRoutingModule }  from './Dashboard-routing.Module';

@NgModule({
    imports: [  
                CommonModule, HttpModule, FormsModule, RouterModule, 
                MdRadioModule, MdToolbarModule, MdProgressBarModule,
                MdButtonModule, MdIconModule, MdListModule,
                MdCardModule, MdInputModule, MdToolbarModule,
                DashboardRoutingModule],
  /*declarations: [  DashboardComponent ],*/
  exports:      [  CommonModule  ],
  providers:    [ AppService ]
})
export class DashboardModule { }

仪表板组件.ts

import { Component }   from '@angular/core';

import { AppService } from './app.service';

@Component({

  template: `
    <router-outlet></router-outlet>
  `
})
export class DashboardComponent {
  userName = '';
  constructor(service: AppService) {
    //this.userName = service.userName;
  }
}

仪表板路由.Module.ts

import { NgModule }            from '@angular/core';
import { Routes, RouterModule }        from '@angular/router';

import { FormsModule } from '@angular/forms';
import { CommonModule }     from '@angular/common';
import { HttpModule }    from '@angular/http';

import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';


import { DashboardComponent } from './DashBoardComponent';
import { ReportListComponent }  from './ReportListComponent';
import { ReportDetailComponent }  from './ReportDetailComponent';


const routes: Routes = [
  { 
    children: [
      { path: 'Home/ReportList',    component: ReportListComponent },
      { path: 'Home/ReportDetail/:reportId', component: ReportDetailComponent }
    ]
  }
];


@NgModule({
    imports: [RouterModule.forChild([routes])  
    ],
  declarations: [ DashboardComponent, ReportListComponent, ReportDetailComponent ],
  exports: [RouterModule, ReportListComponent, ReportDetailComponent, CommonModule]
})


export class DashboardRoutingModule {}
4

2 回答 2

10

Dashboard组件现在是另一个模块的一部分，您需要导入CommonModule该模块才能使用*ngIf指令。您不需要导入CommonModule到您的AppModule，因为您BrowserModule在那里导入BrowserModule，然后导入然后导出CommonModule，这意味着您CommonModule在导入时会自动获得BrowserModule。

于 2016-10-17T22:29:41.233 回答
1

今天我在使用 ionic 5 时遇到了这样的错误，这是因为我删除了负责此页面的路由器行，因为它是一个模式。. *ngIf 和 *ngFor 都没有工作，直到我把那里的链接放回app.routing 文件

于 2021-02-09T23:46:38.540 回答