在模板中添加ngModel时多次加载角度组件答案

【问题标题】：angular component load multiple time when ngModel is added in template在模板中添加ngModel时多次加载角度组件
【发布时间】：2017-09-25 23:13:31
【问题描述】：

我正在尝试创建角度形式。我已经在那个角度模块中引用了表格。

问题是当我在输入文本框中添加 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 组件 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>

我只添加没有 mgNodel，它工作正常。

【问题讨论】：

你是什么意思它加载多次？在哪里？您在哪里声明 HeaderProfileComponent 存在？请重新创建一个示例 plnkr 以帮助我们帮助您。
HeaderProfileComponent 被添加到第一个代码块的模块类中。

标签： javascript node.js angular typescript

【解决方案1】：

这种行为是由于我使用的主题造成的。主题处理了异常并且从不抛出控制台，因此即使在异常导致此行为之后，Angular 也会尝试加载组件。

删除了代码块并让浏览器中的 angular throw 显示输入应包含带有 ngModel 的 name 属性，添加属性 -> 已修复

【讨论】：