Question

我有一个奇怪的问题，我的默认（welcome.component）路由组件初始化两次。这是一个问题，因为welcome.component.html调用了另外两个组件菜单和一个选项卡。因此，如果它初始化两次，它将创建我的菜单和选项卡的两个实例。为了简单起见，我取出了应用程序的所有部分，并且只留下了仍然初始化两次的app.component和welcome.component。我迷失了，需要一些帮助

app.component.html

<home gwLinkID={{gwLinkID}} psnlUID={{psnlUID}} ntName={{ntName}}></home>
<router-outlet></router-outlet>

我通过运行我的debuger确认app.component只被调用一次

 export class AppComponent {
        @Input() gwLinkID: number;
        @Input() psnlUID: string;
        @Input() ntName: string;
        pageTitle: any[];

        errorMessage: string;

        constructor(elm: ElementRef) {
            this.gwLinkID = elm.nativeElement.getAttribute('gwLinkID');
            this.psnlUID = elm.nativeElement.getAttribute('psnlUID');
            this.ntName = elm.nativeElement.getAttribute('ntName');


        }


    }

app.module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { WelcomeComponent } from './home/welcome.component';

@NgModule({

    imports: [BrowserModule, FormsModule, ReactiveFormsModule,
        HttpModule,
        RouterModule.forRoot([
            { path: 'welcome', component: WelcomeComponent },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            { path: '**', redirectTo: 'welcome', pathMatch: 'full' }

        ]),


         CommonModule


    ],
    declarations: [AppComponent, WelcomeComponent],
    providers: [],
    bootstrap: [AppComponent]

})
export class AppModule { }

welcome.component

@Component({
    selector: 'home',
    moduleId: module.id,
    templateUrl: 'welcome.component.html'

})
export class WelcomeComponent {
    @Input() gwLinkID: number;
    @Input() psnlUID: string;
    @Input() ntName: string;
    pageTitle: any[];

    errorMessage: string;

    constructor(elm: ElementRef) {
        this.gwLinkID = elm.nativeElement.getAttribute('gwLinkID');
        this.psnlUID = elm.nativeElement.getAttribute('psnlUID');
        this.ntName = elm.nativeElement.getAttribute('ntName');


    }
}

welcome.component.html

  <!-- Logo of company -->
    <div class="logo text-center">

        <p>{{someVal}}</p>
    </div>

    <nav-menu [gwLinkID]="gwLinkID" [psnlUID]="psnlUID" [ntName]="ntName"></nav-menu>


</div>

<div class="main" style="height:100%">

    <div class="container" style="height:100%">
        <tab></tab>

    </div>

******************** UPDATE ************************** *****************

知道了问题来自这里

app.component.html

<home gwLinkID={{gwLinkID}} psnlUID={{psnlUID}} ntName={{ntName}}></home>
<router-outlet></router-outlet>

如果移动app.component.html

，App.component会导致此问题

并更新我的index.cshtml

<home gwLinkID=@ViewBag.GWLinkID psnlUID=@ViewBag.PsnlUID ntName=@ViewBag.NTName</home>
<ng-component></ng-component>

但是，这会破坏home.component中的另一部分，所有输入值都是undefined或null

  @Input() gwLinkID: number;
    @Input() psnlUID: string;
    @Input() ntName: string;
    pageTitle: any[];

    errorMessage: string;

    constructor(elm: ElementRef) {
        this.gwLinkID = elm.nativeElement.getAttribute('gwLinkID');
        this.psnlUID = elm.nativeElement.getAttribute('psnlUID');
        this.ntName = elm.nativeElement.getAttribute('ntName');


    }

路由导致构造函数初始化两次

0 个答案: