Javascript 使用*ngIf+；模板变量+；loadIntoLocation以编程方式将零部件加载到视图中

我试图建立一个登录页面，其中登录模板被替换为app+路由器插座

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>

我正在努力： 1） 显示登录模板 2） 登录成功时更新LogeIn 3） 相应地隐藏登录名 4） 显示应用程序

这将导致错误消息：

Could not find variable header

我理解这是因为#header是*ngIf模板范围内的局部变量。我尝试了几种方法来解决这个问题（使用*ngIf和局部变量交换模板，而不是使用loadIntoLocation），但没有成功

问题是我的应用程序框架（意思是导航+标题）没有通过加载，所以我需要一种有条件的方式来加载框架组件，而不使用路由（因为在我的情况下仅呈现内容），登录成功返回后

---

帮助将非常有用。

当模板变量位于

*ngIf

中时，将找不到它。我不知道这是设计还是错误。这是故意的

更新 显示了具有最新代码的相同示例

原始（过时代码）

如果需要使用

DynamicComponentLoader

，可以使用类似

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

@组件({
选择器：“dcl包装器”，
模板：``
})
出口级DclWrapper{
@ViewChild（'target'，{read:ViewContainerRef}）目标；
构造函数（专用dcl:DynamicComponentLoader）{}
@Input（）类型；
ngOnChanges（）{
if（this.cmpRef）{
this.cmpRef.dispose（）；
}
if（this.type）{
this.dcl.loadNextToLocation（this.type，this.target）。然后（（cmpRef）=>{
this.cmpRef=cmpRef；
});
}
}
}

@组件({
选择器：'表头组件'，
模板：“标题”
})
导出类头{}
@组成部分({
选择器：“我的应用程序”，
指令：[DclWrapper]，
模板：`
你好
登录html。。。。
登录
`,
})
导出类AppComponent{
建造师(
专用dcl:DynamicComponentLoader，
private _elmRef:ElementRef，
/*私有_httpRest:httpRest*/*http调用服务*/）{
headerCmp=null；
logedin=true；
ngOnInit（）{}
登录（e）{
log（'login'）；
//var vm=这个；
//模拟XHR
设置超时（（）=>{
this.postloginssuccess（）
})
}
postLoginSuccess（）{
//var vm=这个；
this.logedin=true；
设置超时（（）=>{
这个.loadApp（）；
});
}
loadApp（）{
console.log（'loadApp'）；
this.headerCmp=标题；
//此._dcl.LoadInLocation（标题，此._elmRef，“标题”）；
//本dcl.LoadInLocation（导航，本导航，导航）；
}
}

---

我使用Michael D关于使用[hidden]html5属性的建议解决了这个问题。我不知道隐藏的html5属性

已将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>

致：

---

注意：如果使用箭头函数，则不需要var vm=this。是否可以确认使用[hidden]而不是ngIf解决问题？我不明白您为什么要使用

DynamicComponentLoader

。为什么不创建一个

标题

和一个

导航

组件并将它们绑定到模板中。我同意[hidden]解决了这个问题！！！非常感谢Michael D，我不知道html5的[隐藏]属性。

@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");
  }
}

<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>