如何在角度中从类中装饰组件?

时间:2017-05-17 21:45:38

标签: javascript angular typescript angular-components angular-decorator

我想在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();
  }
}

我该如何实现?

1 个答案:

答案 0 :(得分:2)

装饰器不是类的一部分,因此装饰器内的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或结构指令通常是一个更好的主意。

为组件切换模板的更直接方法是使用直接访问其他组件“{{1}”的dynamic component,并可以将它们与视图交换出来。