Наследование угловых компонентов, оставьте родительский html - PullRequest
Новая
       6

Наследование угловых компонентов, оставьте родительский html

1 голос
/ 12 марта 2019

Я использую много наследования между моими угловыми компонентами.

Иногда я хотел бы иметь возможность наследовать от определенного компонента и не предоставлять html для дочернего элемента (потому что он всегда будет таким же, как родительский), что повсеместно приводит к дублированию кода.

Каков наилучший способ достичь этого? 

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class Parent {

}

@Component({
  selector: 'app-child',
  template: '', <-- you have to provide a template
})
export class Child extends Parent {

}

1 Ответ

1 голос
/ 12 марта 2019

Вы можете изменить поведение компонента по умолчанию, чтобы использовать шаблон из базового класса, например, 

function MyComponent(cfg: any) {
  return function (constructor: Function) {
    let base = (Object.getPrototypeOf(constructor.prototype).constructor);
    cfg.template = (<any>base).__annotations__[0].template;
    return Component(cfg)(constructor);
  }
}

@MyComponent({
  selector: 'my-app-child',
  styleUrls: ['./app.component.css']
})
export class AppChildComponent extends AppComponent {

}

простая демонстрация https://stackblitz.com/edit/angular-swaanp?file=src%2Fapp%2Fapp.component.ts

PS Я не рекомендую этот подход:)

...