Question

编辑1

看我的回答。有点奇怪，但它就像那样。

编辑2 （感谢Gunter）似乎可能是一些缓存问题或Webstorm。不确定。但不是代码问题。

原始问题

非常简单的模板：

<div *ngIf="getToken() == null">
 <login-component></login-component>
</div>
<div *ngIf="getToken() != null">
 <dashboard-component></dashboard-component>
</div>

dashboard-component的相应HTML模板包含一些仅用于测试目的的简单HTML：

<h1>Dashboard component loaded & rendered</h1>

问题：我从未真正看到正在呈现的仪表板组件。

代码详情

指令在AppComponent照常设置：

@Component(
 selector: 'management-app',
 styleUrls: const ['app_component.css'],
 templateUrl: 'app_component.html',
 directives: const [CORE_DIRECTIVES, materialDirectives, DashboardComponent, LoginComponent],
 providers: const [materialProviders],
)
class AppComponent

登录呈现正常，我可以输入一些凭据，这会使getToken() != null产生true，并且屏幕显示为空白。我试过这个以确保它有效：

<div *ngIf="getToken() == null">
 <login-component></login-component>
</div>
<div *ngIf="getToken() != null">
 <h1>It worked!</h1>
</div>

确实，我看到It worked!。

依此而至dashboard-component：

@Component(
 selector: 'dashboard-component',
 styleUrls: const ['package:angular_components/app_layout/layout.scss.css','dashboard_component.css'],
 templateUrl: 'dashboard_component.html',
 directives: const [CORE_DIRECTIVES,materialDirectives,],
 providers: const [DashboardService],
)
class DashboardComponent

为了让组件正确渲染，我缺少什么？

Answer 1

不使用函数getToken（）使用变量和getter。

<div *ngIf="!tokenActive">
 <login-component></login-component>
</div>
<div *ngIf="tokenActive">
 <h1>It worked!</h1>
</div>

//In your component
this.token:any=null
get tokenActive()
{
    return this.token
}
//In some where
this.token=true, //or what ever

Answer 2

随机我尝试了这个：

<div>
 <h1>Dashboard component loaded & rendered</h1>
</div>

它按预期工作。我不知道你必须这样包装模板。也许有一个更普遍的规则，有人可以解释......

当所有指令都存在时，什么阻止组件呈现？

2 个答案: