Наследование угловых компонентов

Question

У меня есть некоторые компоненты, которые выглядят одинаково, служат одной и той же цели, имеют одинаковые стили, однако они должны реализовывать немного другое поведение в зависимости от модуля, в котором они используются. Теперь это разные компоненты, однако я не уверен,Я делаю правильно, копируя и вставляя один компонент несколько раз и внося небольшие изменения, чтобы добиться небольших изменений в его поведении и макете.

Если бы это был простой TypeScript, я бы просто расширил базовый класс и сделал все, что мне нужноОднако иногда мне нужно вносить небольшие изменения в HTML-макет либо.

Есть ли способ, где я мог бы обобщить свой компонент (например, компонент таблицы) и сделать его способным реализовать другое поведение в зависимости от моих потребностей?

Answer 1

У вас может быть общий компонент многократного использования, например, TableComponent.

И вы можете наследовать компонент там, где вам нужно, и передавать необходимые аргументы и обработчик событий, чтобы настроить его в соответствии с вашими потребностями.

<table-comp [data]="arguments" (eventHandler)="FunctionName()">
</table-comp>

Answer 2

Да, но нет общего рецепта.Вы должны спроектировать компоненты самостоятельно, максимизируя универсальность компонентов, чтобы обеспечить плодотворное использование компонентов.

Можно использовать следующие строительные блоки:

• Input / Output атрибуты конечно.Подумайте о том, как данные и конфигурация для вашего компонента могут передаваться через аргументы, а не жестко закодированы.

• <ng-content>: вы можете разрешить внедрение контента.Таким образом, вам не нужно переписывать компоненты, когда вносятся незначительные изменения.Используйте это вместе с ng-content select, чтобы иметь возможность настраивать только некоторые части дисплея.Подробнее здесь, например .

• Использование ngIf*, ngSwitch*, ng-container, ng-template и тому подобное.Это позволяет отображать различный HTML-код на основе переменных конфигурации компонента.Таким образом, вы часто можете иметь только один компонент для различных конечных целей.(Например: один ControlComponent, который может быть либо флажком, текстовым полем и т. Д.).

Используя все эти инструменты, вы можете немного поразмыслить о лучшем способеповторно использовать код.Вы должны стремиться к без репликации кода (стремитесь к DRY ).

Answer 3

Откройте app-routing.module.ts и предположим, что у нас есть эти:

// ...component imports

const routes: Routes = [
  { path: '', component: PageoneComponent },
  { path: 'pageone', component: PageoneComponent },
  { path: 'pagetwo', component: PagetwoComponent },
  { path: 'pagethree', component: PagethreeComponent }
];

Откройте каждый из компонентов страницы и расширьте его, используя BaseComponent:

export class PageoneComponent 
  extends BaseComponent
  implements OnInit {
    // ...
}

.как добавление маршрутизатора и внедрение его в конструктор BaseComponent с использованием super :

constructor(public router: Router) {
  super(router);
}

Это приведет к тому, что модуль внедренного маршрутизатора возьмет его в расширенный компонент.

Из-за наследования, переданного от базового компонента, все, что определено в базовом компоненте, доступно всем компонентам, которые его расширяют.

См. Полную статью компонент-наследование