如何以棱角分明的方式装饰类中的组件

Question

我想在 angular4 应用程序中更改组件的装饰器。

像这样：

import { Component, OnInit } from '@angular/core';
import { BooksService } from './../books.service';
@Component({
  selector: 'users',
  templateUrl: this.template,
  styleUrls: ['./users.component.css']
})
export class UsersComponent {
  users: any;
  template: any = './users.component.html';
  constructor(private booksService : BooksService) {
    this.users = this.booksService.getItems();
  }
}

我该如何实现？

Answer 1

装饰器不是类的一部分，因此装饰器内部的this不引用组件。

从技术上讲，使用静态类可以做到这一点：

@Component({
  selector: 'users',
  templateUrl: UsersComponent.template,
  styleUrls: ['./users.component.css']
})
export class UsersComponent {
  users: any;
  public static template: any = './users.component.html';
}

。但这完全没用，因为静态值与硬编码它相同。值得庆幸的是，Angular 真的不需要在装饰器中使用任何变量。无论如何它都行不通;它使用组件在后台编译这些模板，更改模板会破坏编译器(尤其是 AOT 编译器(。

您是否正在尝试更改组件的 html？使用 Router 或结构指令通常是一个更好的主意。

切换组件模板的更直接方法是使用动态组件，该组件直接访问其他组件的TemplateRef，并可以将它们与视图交换。