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 ディレクティブが突然機能しないのはなぜですか? ログイン成功後に遅延ロードするようにダッシュボードを移動する前は、機能していました。

上記のリンクで共有モジュールアプローチを使用するまで、私はずっと行ってきました。共有モジュールを使用していないことがこの問題の原因ですか? モジュールの共有は、コードをクリーンアップする方法であり、すべてが機能したらそれ以上のことを繰り返さない方法であると推測しました。

私のダッシュボードは、上でたどっているリンクの 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';

それでも、上記のスニペットのようにエラーが発生します。何が欠けている可能性がありますか？ヘルプやヒントをいただければ幸いです。

編集

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

dashboard-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 {}
4

2 に答える 2

10

Dashboardコンポーネントは別のモジュールの一部になり、ディレクティブCommonModuleを使用するにはそのモジュールにインポートする必要があります。そこにインポートし、インポートしてからエクスポートするため、*ngIfにインポートする必要はありません。つまり、インポートすると自動的に取得されます。CommonModuleAppModuleBrowserModuleBrowserModuleCommonModuleCommonModuleBrowserModule

于 2016-10-17T22:29:41.233 に答える