Angular 2 stable: переменная templateUrl

Question

Angular 2 stable: переменная templateUrl

Я довольно плохо знаком с AngularJS (использую 2 стабильных). У меня есть приложение PHP / Codeigniter3, и моя работа заключается в создании SPA. Я столкнулся с проблемой, когда я вообще не могу получить доступ к параметрам маршрутизатора, чтобы добавить их в templateUrl.

Например:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
selector: 'apps_container',
// template: `You just accessed app: {{app_name}}` // This binding works obviously.
templateUrl: (() => {
// return 'app/' + this.route.params['app_name'] // Will never work no matter what because I have no access to route
return 'app/:app_name'; // Treated as a string.
})()
})

export class AppViewComponent {
app_name: any;

constructor(
private route: ActivatedRoute,
private router: Router

) {}

ngOnInit() {
this.route.params.forEach((params: Params) => {
this.app_name = params['app_name'];
});
}
}

0

angular angularjs codeigniter php single-page-application

Решение

Другие решения

Несколько интересных ответов, связанных с вашим вопросом, можно найти здесь: Динамический шаблон в templatURL в angular2

0

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

использование window.location получить текущий URL и вручную проанализировать параметры.
Добавьте прослушиватель маршрутизатора для обнаружения RoutesRecognized событие и использовать его state:RouterStateSnapshot свойство для поиска параметров и сохранения его в статической переменной для использования в обратном вызове шаблона.

0

yurzui — получает ли динамически добавленный компонент всю привязку в родительском компоненте — AppContainerComponent в вашем примере?

0

Источник

Accepted Answer

При этом вы можете сделать это с помощью динамической загрузки компонентов.

В angular2 final это может выглядеть так:

@Component({
selector: 'app-container',
template: '<template #vcRef></template>'
})

export class AppContainerComponent {
@ViewChild('vcRef', { read: ViewContainerRef }) vcRef: ViewContainerRef;
constructor(
private route: ActivatedRoute,
private cmpFactoryResolver: ComponentFactoryResolver,
private compiler: Compiler
) { }

ngOnInit() {
this.route.params.forEach((params: Params) => {
this.loadDynamicComponent(params['app_name']);
});
}

loadDynamicComponent(appName) {
this.vcRef.clear();

@Component({
selector: 'dynamic-comp',
templateUrl: `src/templates/${appName}.html`
})
class DynamicComponent { };

@NgModule({
imports: [CommonModule],
declarations: [DynamicComponent]
})
class DynamicModule { }
this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
.then(factory => {
const compFactory = factory.componentFactories
.find(x => x.componentType === DynamicComponent);
const cmpRef = this.vcRef.createComponent(compFactory);
cmpRef.instance.prop = 'test';
cmpRef.instance.outputChange.subscribe(()=>...);;
});
}
}

Пример плунжера

Я думаю, есть и другие способы сделать это, как ngSwitch или же ngTemplateOutlet

1