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

}

但是在NewProfileComponent的模板中如果使用* ngIf发生编译错误：无法绑定到＆＃39; ngIf＆＃39;因为它不是＆＃39; <＆＃39;

的已知属性

任何想法？

Answer 1

通用模块包含 ngIf 指令，您不会在 profileModule 中导出它。

所以，你只需要加入它。

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

angularjs 2 RC5 ngModule延迟加载

1 个答案: