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

Question

编辑 1

看我的回答。有点奇怪，但它就是这样工作的。

编辑 2 （感谢冈特）似乎可能是一些缓存问题或 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>

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

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

What prevents component from rendering when all directives are present?

dart

angular-dart

angular