Блог

Мне нужно использовать разные HTML-шаблоны для одного и того же файла typescript, основанные на выражении в моем конструкторе. это возможно?

Мне нужно что-то вроде:

 <div class="container-fluid">
     <app-teste1 *ngIf="teste == '1'>
     <app-teste2 *ngIf="teste == '2'>
</div>
  

и в конструкторе:

 this.teste = 1
  

Итак, первый компонент должен быть визуализирован (app-teste1).

Но у моего компонента много свойств, есть другой способ сделать это, не передавая различные свойства ввода / вывода?

Я не думаю, что это доступно в angular сейчас ( angular 8.0.0-beta.13 ).

Вы можете манипулировать деревом DOM и отображать его разными способами, но загрузка другого файла шаблона ( .html ) в angular на данный момент невозможна.

Вы можете наследовать от базового класса и использовать другой шаблон. Что-то вроде этого:

 @Component({
  selector: 'app-teste1',
  template: `<div>this is app-teste1</div>`
})
export class TestOneComponent {
    // ...
}

@Component({
  selector: 'app-teste2',
  template: `<div>this is app-teste2</div>`
})
export class TestTwoComponent extends TestOneComponent {
    // ...
}