angularjs 2 RC5 ngModule遲緩裝載

Question

我使用RC5 ngModule

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { IndexComponent } from './index.component'; 
import {RouterModule} from '@angular/router'; 

import {MdMenuModule} from '@angular2-material/menu'; 
import {MdIconModule} from '@angular2-material/icon'; 
import {MdSidenavModule} from '@angular2-material/sidenav'; 
import {MdToolbarModule} from '@angular2-material/toolbar'; 



@NgModule({ 
    declarations: [AppComponent], 
    imports:  [ 
     BrowserModule, 
     MdMenuModule, 
     MdIconModule, 
     MdSidenavModule, 
     MdToolbarModule, 
     RouterModule.forRoot([ 
      {path: '', component: IndexComponent}, 
      {path: 'profile', loadChildren: './app/profile/profile.module'} 
     ]) 
    ], 
    bootstrap: [AppComponent], 
}) 
export class AppModule {} 

profile.module.ts

import {RouterModule} from '@angular/router'; 
import {NgModule} from '@angular/core'; 
import NewProfileComponent from './new.profile.component'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import ProfileService from './profile.service'; 

import {MdInputModule} from '@angular2-material/input'; 
import {MdCardModule} from '@angular2-material/card'; 
import {MdButtonModule} from '@angular2-material/button'; 

@NgModule({ 
    declarations: [ NewProfileComponent ], 
    imports: [ 
    MdInputModule, 
    MdCardModule, 
    ReactiveFormsModule, 
    MdButtonModule, 
    RouterModule.forChild([ 
     { path: 'new', component: NewProfileComponent }, 
    ]) 
    ], 
    providers: [ 
    ProfileService 
    ] 
}) 
export default class ProfileModule {} 

和new.profile.component.ts

///<reference path="../../node_modules/@angular/core/src/metadata/lifecycle_hooks.d.ts"/> 
import {Component, OnInit} from '@angular/core'; 
import ProfileService from './profile.service'; 

import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 



@Component({ 
    selector: 'new-profile-app', 
    templateUrl: './app/profile/new.profile.html' 
}) 

export default class NewProfileComponent implements OnInit{ 

    public registerForm: FormGroup; 

    constructor(private formBuilder: FormBuilder, private service: ProfileService) {} 

    ngOnInit():any{ 
     this.registerForm = this.formBuilder.group({ 
      name: ['', Validators.required], 
      email: ['', Validators.required], 
      password: ['', Validators.required], 
     }); 
    } 



    public save(data: any){ 
     if(this.registerForm.invalid){ 
      return; 
     } 
     this.service.create(data) 
      .subscribe(function (response: any) { 
       console.debug(response); 
      }) 
    } 

} 

但在模板中爲N ewProfileComponent如果使用* ngIf發生編譯錯誤：無法綁定到'ngIf'，因爲它不是'p'的已知屬性

有什麼想法嗎？

Answer 1

ngIf指令由CommonModule包含的，你是不是在profileModule其導出。

所以，你只需要包括它。從 './new.profile.component '

import {RouterModule} from '@angular/router'; 
... 
... 
import {NewProfileComponent} from './new.profile.component'; 
import { CommonModule }  from '@angular/common'; 
... 
... 

@NgModule({ 
    declarations: [ NewProfileComponent ], 
    imports: [CommonModule, 
    ... 
    ... 
    RouterModule.forChild([ 
     { path: 'new', component: NewProfileComponent }, 
    ]) 
    ], 
    providers: [ 
    ProfileService 
    ] 
}) 
export default class ProfileModule {}