Как привязать «имя» к маршрутизатору-розетке для рендеринга динамически созданных компонентов angular-cdk - PullRequest
Новая
       34

Как привязать «имя» к маршрутизатору-розетке для рендеринга динамически созданных компонентов angular-cdk

0 голосов
/ 24 января 2019

Я генерирую динамические угловые компоненты, используя angular-cdk и основываясь на article blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular. Попытка сделать это кажется единственно возможным - использовать именованные выходы маршрутизатора, такие как ниже <router-outlet name="outletname"></router-outlet>, однако здесья не могу связать свойство name маршрутизатора-розетки, и, следовательно, данные, которые я пытаюсь перенаправить сюда, отображаются очень точно, я повторно использовал этот контейнер.

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

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

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

1 Ответ

0 голосов
/ 25 января 2019

Из моего комментария выше: на данный момент привязка к имени невозможна, хотя это запрос функции, найденный здесь github.com/angular/angular/issues/12522, который ведет к github.com/angular/angular/issues/17173 для интересных идей / реализаций о том, как его обойти.

Похоже, что обходной путь помог, но теперь вам нужно иметь возможность динамически устанавливать имя маршрутизатора в routerLink.У меня есть два предложения:

1) вы можете попробовать использовать вычисленные ключи и посмотреть, сможет ли Angular правильно их интерполировать внутри шаблона.

// in Component:   let dynamicRoute = conditionMet ? "blogviewolet" : "otherOutlet";
// in template:    [routerLink] = "[{ outlets: { [dynamicRoute]: [panels.getData('anchor-link-path').fieldValue] } }]"

2) Если # 1 завершится неудачно, вы можете попробовать передать [routerLink] объект javascript из Компонента, а не всегда устанавливать его в шаблоне.Если вы можете сказать свою логику routerLink, то перед загрузкой представления вы можете установить переменную и передать ее в routerLink. 

// in Component 

   theOutlet: any;

   if (conditionMet) {
       this.theOutletObject = [{ outlets: { someOutlet: [ foo ]}}];
   } else {
       this.theOutletObject = [{ outlets: { someOtherOutlet: [ bar ]}}];
   }

// in template:  

   <a [routerLink]="theOutletObject"></a>
...