Question

我必须使用Angular 7创建一个仪表板，其中布局结构和要显示的组件由用户定义。假设有三个组件（但可能更多）：chartA，chartB，chartC和两个用户。

在AppService中初始化应用程序期间，在用户登录后，一个函数会根据用户的偏好使用布局创建变量“ userTemplate”。

对于user1，userTemplate将为：

<div class="flexHorizontal">
    <app-chartA></app-chartA>
    <app-chartB></app-chartB>
</div>

代替user2的是：

<div class="flexVertical">
    <app-chartA></app-chartA>
    <div class="flexHorizontal">
        <app-chartB></app-chartB>
        <app-chartC></app-chartC>
    </div>
</div>

如果可以在app.component.ts中将此变量分配给template属性，则该问题将非常容易解决。但这是不可能的。我收到“无法读取未定义的属性'userTemplate'”。

app.component.ts：

import { Component, } from '@angular/core';
import { AppService } from './services/app.service';

@Component({
  selector: 'app-root',
  template: this.userTemplate,
  styleUrls: ['./app.component.scss'],
})

export class AppComponent {
  title = 'Dashboard';
  userTemplate: string;

  constructor (private app: AppService ){
    this.userTemplate=app.config.template;
  }

}

Answer 1

@Component(...)是类AppComponent的装饰器，它是在实例化该类之前定义的，因此this.userTemplate当时不存在，但也不存在可变范围，因此您的错误。 this类之外的范围中没有AppComponent。

以下资源应与动态模板一起为您提供帮助：https://angular.io/guide/dynamic-component-loader

Angular 7中仪表板的动态模板

1 个答案: