* ngIf +テンプレート変数+ loadIntoLocationを使用してプログラムでコンポーネントを表示する

Question

ログインテンプレートをapp + router-outletに置き換えたログインページを作成しようとしています。

HTML：

<div class="contentWrapper" *ngIf="!logedin"> 
    Login html.... 
</div> 

<div *ngIf="logedin"> 
    <div #header></div> 
    <div class="contentWrapper"> 
     <div #nav></div> 
     <div class="main"> 
      <router-outlet> 
      </router-outlet> 
     </div> 
    </div> 
</div> 

コンポーネント

export class AppComponent implements OnInit{ 
logedin = 0; 

constructor(
    private _dcl:DynamicComponentLoader, 
    private _elmRef:ElementRef, 
    private _httpRest:HttpRest //http calls service 
){} 

ngOnInit(){} 
login(){ 
    var vm = this; 

    //simulated XHR 
    setTimeout(()=>{ 
     vm.postLoginSuccess() 
    }) 
} 
postLoginSuccess(){ 
    var vm = this; 
    vm.logedin = 1; 
    setTimeout(()=>{ 
     vm.loadApp() 
    },0); 
} 
loadApp(){ 
    this._dcl.loadIntoLocation(Header,this._elmRef,"header"); 
    this._dcl.loadIntoLocation(Navigation,this._elmRef,"nav"); 
} 
} 

私がしようとしています： 1） 3 logedinログイン成功アップデートにログインテンプレート 2）を示し）それに応じてログインを非表示にする 4）ショーアプリ

エラーMSGでの

この結果は：

Could not find variable header 

私は＃ヘッダーは* ngIfテンプレートの適用範囲の下でローカル変数であるため、これが起こっている理解しています。私はいくつかの方法で成功せずにこのテクニックを解決しようとしました（* ngIfとローカル変数を使用してテンプレートをスワップしてloadIntoLocationを使用する）。

私のアプリケーションフレーム（ナビゲーション+ヘッダを意味する）は<ルータ出口経由でロードされていません>したがって、ルーティングを使用せずにフレームコンポーネントをロードする条件付きの方法が必要です（<ルータアウトレット>私の場合は）、ログインが成功裏に返されました。

ヘルプは非常に訴求されます。

Answer 1

テンプレート変数が*ngIfの中にある場合、それは見つかりません。 これは、仕様またはバグであるかどうかわかりません。 これは仕様です。

更新 Angular 2 dynamic tabs with user-click chosen componentsは、最新のコードで同じ例を示しています。

元（時代遅れコード）

あなたがDynamicComponentLoaderを使用する必要がある場合は、

import {Component, DynamicComponentLoader, ElementRef, Input, ViewChild, ViewContainerRef} from 'angular2/core'; 

@Component({ 
    selector: 'dcl-wrapper', 
    template: `<div #target></div>` 
}) 
export class DclWrapper { 
    @ViewChild('target', {read: ViewContainerRef}) target; 

    constructor(private dcl:DynamicComponentLoader) {} 
    @Input() type; 

    ngOnChanges() { 
    if(this.cmpRef) { 
     this.cmpRef.dispose(); 
    } 
    if(this.type) { 
     this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => { 
     this.cmpRef = cmpRef; 
     }); 
    } 
    } 
} 

@Component({ 
    selector: 'header-comp', 
    template: 'header' 
}) 
export class Header{} 

@Component({ 
    selector: 'my-app', 
    directives: [DclWrapper], 
    template: ` 
    <h1>Hello</h1> 
<div class="contentWrapper" *ngIf="!logedin"> 
    Login html.... 
</div> 

<div *ngIf="logedin"> 
    <dcl-wrapper [type]="headerCmp"></dcl-wrapper> 
    <div class="contentWrapper"> 
     <div #nav></div> 
     <div class="main"> 
      <router-outlet> 
      </router-outlet> 
     </div> 
    </div> 
</div> 

<button (click)="login()">log in</button> 
    `, 
}) 
export class AppComponent { 
    constructor(
    private _dcl:DynamicComponentLoader, 
    private _elmRef:ElementRef, 
    /*private _httpRest:HttpRest*/ /*http calls service*/){} 

    headerCmp = null; 
    logedin = true; 
    ngOnInit(){} 

    login(e){ 
    console.log('login'); 
    //var vm = this; 

    //simulated XHR 
    setTimeout(()=>{ 
     this.postLoginSuccess() 
    }) 
    } 

    postLoginSuccess(){ 
    //var vm = this; 
    this.logedin = true; 
    setTimeout(()=>{ 
     this.loadApp(); 
    }); 
    } 

    loadApp(){ 
    console.log('loadApp'); 
    this.headerCmp = Header; 
    //this._dcl.loadIntoLocation(Header,this._elmRef,"header"); 
    //this._dcl.loadIntoLocation(Navigation,this._elmRef,"nav"); 
    } 
} 

Plunker example beta.17のようなラッパーコンポーネントを使用して行うことができます0 Plunker example <= beta.15

Answer 2

[hidden] html5属性の使用に関するMichael Dのアドバイスを使用してこの問題を解決しました。私は隠されたhtml5 attrを知らなかった。

変更のhtmlから：

<div class="contentWrapper" *ngIf="!logedin"> 
</div> 
<div *ngIf="logedin"> 
<div #header></div> 
<div class="contentWrapper"> 
    <div #nav></div> 
    <div class="main"> 
     <router-outlet> 
     </router-outlet> 
    </div> 
</div> 

へ：

<div class="contentWrapper" [hidden]="logedin"></div> 
<div [hidden]="!logedin"> 
<div #header></div> 
<div class="contentWrapper"> 
    <div #nav></div> 
    <div class="main"> 
     <router-outlet> 
     </router-outlet> 
    </div> 
</div>