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

Question

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

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

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

该错误似乎无法获得核心角度参考和/或角度2材料库的参考.我已将此处列出的所有这些导入放在除路由模块之外的所有模块中

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在导入时会自动导入BrowserModule.