Взаимодействие угловых компонентов с инжекцией и classReference - практический опыт? - PullRequest
Новая
       4

Взаимодействие угловых компонентов с инжекцией и classReference - практический опыт?

0 голосов
/ 31 октября 2018

У меня есть вопрос, касающийся лучших практик компонентной архитектуры / связи.

Рядом с привязками свойств и службами я недавно заметил следующую настройку родитель-потомок и хотел знать, что вы об этом думаете? Преимущество / недостаток / вариант использования / практический опыт?

Очевидный недостаток, который я вижу, заключается в том, что вся реализация происходит в родительском / главном компоненте.

Другие аспекты могут быть:

  • ChangeDetection
  • производительности
  • иерархическое структурирование больших компонентов

Я надеюсь, что минимальный пример может проиллюстрировать принцип.

Основой этого принципа являются инъекция и ссылка на класс (см .: циклические разрывы-с-вперед-ссылкой на класс-forward-ref ). 

@Component({
  providers: [
  { provide: MyApp1, useExisting: forwardRef(() => AppComponent) },
  { provide: MyApp2, useExisting: forwardRef(() => AppComponent) },
  { provide: MyApp3, useExisting: forwardRef(() => AppComponent) },
  ],
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html",
})

export class AppComponent implements MyApp1, MyApp2, MyApp3 {

  childProp1 = "property of child, defined in parent";
  private iHaveAccessToParentProp = true;

  childMethod1(): void {
    console.log(this.iHaveAccessToParentProp);
  }

}



export abstract class MyApp1 {
  abstract readonly childProp1: string;
  abstract childMethod1(): void;
}

@Component({
  selector: "app-myApp1",
  styleUrls: ["./myapp1.component.scss"],
  templateUrl: "./myapp1.component.html",
})
export class MyApp1Component {

  constructor(public app: MyApp1) {
  }
}
<!------- myapp1.component.html ----->
 <p>{{ app.childProp1 }}</p>

1 Ответ

0 голосов
/ 31 октября 2018

Как вы упомянули в своем вопросе, этот шаблон помещает всю реализацию в родительский "AppComponent".

Честно говоря, я не уверен, почему вы захотите это сделать. Смысл основанной на компонентах инфраструктуры, такой как Angular, заключается именно в том, чтобы разбить эту функциональность, разделив каждый отдельный элемент функциональности на собственный компонент, чтобы компоненты могли следовать этому Принципу единой ответственности .

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

...