Как использовать композицию вместо наследования при совместном использовании логики между компонентами в Angular 6? - PullRequest
Новая
       8

Как использовать композицию вместо наследования при совместном использовании логики между компонентами в Angular 6?

0 голосов
/ 14 сентября 2018

У меня есть модуль в Angular, который структурирован так: 

moduleName
    componentA
    componentB

Теперь componentA и componentB очень похожи, поскольку они имеют некоторые атрибуты и методы, например: 

protected available: boolean = true;

Поскольку я не хочу повторяться, я создал базовый класс, который хранит все это: 

export abstract class BaseComponent {
    protected available: boolean = true;
}

И оба контроллера наследуются от этого класса: 

import { BaseComponent } from '../base.component';

export class ComponentA extends BaseComponent implements OnInit {
    constructor() {
        super();
    }

    ngOnInit() {
        console.log(this.available);
    }
}

Это работает просто отлично.Однако, когда я исследую эту мысль, многие люди говорят:

Не используйте наследование, используйте композицию в этом случае.

Хорошо, но как я могу использовать композицию вместо этого?И действительно ли выигрыш такой большой по сравнению с текущим решением?

Большое спасибо за ваше время.

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Если вы создаете одинаковые компоненты с большой частью той же логики.Вы можете использовать наследование, например, controlSelectComponent и controlInputComponent stackblitz example

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

Вы также можете предоставить услугу каждому компоненту в разделе поставщиков 

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [MyService]
})
export class AppComponent {
  constructor(private myService: MyService) {
  }
}

Но в случае сохранения состояния в службе это не лучшее решение

Заключение

Использование служб и композиции для методов совместного использования ресурсов между компонентами.

Использование абстрактного класса и наследования для компонентов с одинаковой логикой и изменениями состояния.

0 голосов
/ 14 сентября 2018

Для составления объектов в angular вам необходимо иметь ссылку на этот объект внутри вашего класса, который разделяет данные и функциональность.Для этого вам нужно использовать сервисы Angular и внедрить их в свой класс, и для каждого компонента должен быть 1 экземпляр сервиса.

  1. Создайте новую службу, запустив ng g s my-service
  2. Добавьте public available: boolean = true; к службе
  3. provide службу через компонент в @Componentконфиги на ваших компонентах
  4. внедряют службу в ваши конструкторы обоих компонентов, constructor(private myService:MyService)

Теперь у вас есть композиция, которая хранит данные и функциональность

...