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

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

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

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

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

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

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

Основа этого принципа - внедрение и ссылка на класс (см .: разорвать круговорот с-a-forward-class-reference-forwardref).

@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
62
1

Ответы 1

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

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

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

Другие вопросы по теме