Question

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

当我在SPA模式下单击登录按钮时，我会成功重定向到预先加载了登录页面的DashboardComponent页面 - 这是在我引入延迟加载之前。在关注this tutorial后，我现在收到这些错误

错误代码段

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指令突然不起作用？在我移动仪表板以便懒惰地加载登录成功之前，它正在工作。

我一直走到上面发布的链接中使用共享模块方法。是不是使用共享模块导致此问题？我假设模块共享是一种清理代码的方法，一旦一切正常，就不再重复了。

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

错误似乎无法获得核心角度参考和/或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';

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

修改

Dashboard.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 { }

DashBoardComponent.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;
  }
}

仪表板routing.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 {}

Answer 1

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

Answer 2

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

无法绑定到'ngIf'，因为它不是'md-card-title'的已知属性

2 个答案: