首页 文章

angularjs 2 RC5 ngModule延迟加载

提问于
浏览
0

我使用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);
            })
    }

}

但是如果使用* ngIf发生编译错误,则在NewProfileComponent模板中:无法绑定到'ngIf',因为它不是'p'的已知属性

任何的想法?

1 回答

  • 0

    ngIf 指令包含在 CommonModule 中,您不会在 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 {}
    

相关问题