当在模板中添加ngmodel时，角组件多个时间加载

Question

我正在尝试创建角形式。我已经引用了该角模块中的形式。

问题是当我在输入文本框中添加ngmodel时，角组件在页面中多次加载。

以下是模块代码

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HeaderProfileComponent } from './header-profile.component';
import { LayoutModule } from '../../../../layouts/layout.module';
import { DefaultComponent } from '../../default.component';
import { FormsModule } from "@angular/forms";
import { BrowserModule } from '@angular/platform-browser';
import { UserService } from '../../../../../_services/user.service'; 
const routes: Routes = [
    {
        "path": "",
        "component": DefaultComponent,
        "children": [
            {
                "path": "",
                "component": HeaderProfileComponent
            }
        ]
    }
];
@NgModule({
    imports: [
        FormsModule,CommonModule, RouterModule.forChild(routes), LayoutModule 
    ], exports: [
        RouterModule
    ], declarations: [
        HeaderProfileComponent
    ],providers:[
        UserService
    ]
})
export class HeaderProfileModule {
}

以下是组件代码

    import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Helpers } from '../../../../../helpers';
import { UserService } from '../../../../../_services/user.service';
import { ApplicationUser } from '../../../../../Entities/UserDetail';
@Component({
    selector: ".m-grid__item.m-grid__item--fluid.m-wrapper",
    templateUrl: "./header-profile.component.html",
    encapsulation: ViewEncapsulation.None,
})
export class HeaderProfileComponent implements OnInit {
    appUser: ApplicationUser = null;
    newUser: ApplicationUser = null;
    constructor(private _userService: UserService) {
        this.appUser = new ApplicationUser();
        this.newUser = new ApplicationUser();
    }
    ngOnInit() {
        this._userService.getCurrentUser()
            .subscribe((data: ApplicationUser) => {
                this.appUser = data;
            }, (err: Response) => {
            });
    }
    createUser(){
        debugger;
    }
}

在Angular Compontion HTML中：

<form (ngSubmit)="createUser()" class="m-form m-form--fit m-form--label-align-right">
                                    <input class="form-control m-input" type="password" [(ngModel)]="newUser.FirstName" >
    </form>

wen我只添加没有mgnodel，它可以正常工作。

Answer 1

行为是由于我正在使用的主题。主题处理了例外，并且永远不要放在控制台上，因此即使在例外引起这种行为后，Angular都试图加载组件。

删除了代码块，让Angular投入浏览器显示输入应包含ngmodel的名称属性，添加属性 -> filex