Route. Обновление шаблона
Если есть динамическая ссылка, например:
<a [routerLink]="['/users', 10, 'Anna']">Load Anna (10)
И в шаблоне в ngOnInit() формируется объект по параметрам url:
this.user = {
id: this.route.snapshot.params['id'],
name: this.route.snapshot.params['name'],
}
Для обновления шаблона при переходе по такой ссылке необходимо подписаться на событие:
import { ActivatedRoute, Params } from '@angular/router';
//...
ngOnInit() {
this.user = {
id: this.route.snapshot.params['id'],
name: this.route.snapshot.params['name'],
}
this.route.params.subscribe(
(params: Params) => {
this.user.id = params['id'];
this.user.name = params['name'];
}
);
}
Когда вы подписываетесь на наблюдение в компоненте, практически всегда нужно отписываться, когда компонент уничтожается. ActivatedRoute является одним из немногих исключений, так как он отписывается автоматически. Тем не менее, отписываться является хорошей практикой, которая никогда не будет лишней.
//...
import { Subscription } from 'rxjs/Subscription';
//...
paramsSubscription: Subscription;
//...
ngOnInit() {
//...
this.paramsSubscription = this.route.params.subscribe(
//...
);
}
ngOnDestroy() {
this.paramsSubscription.unsubscribe;
}
Помощь сайту
ЮMoney:
4100 1180 7209 833
Карта Сбербанк:
2202 2080 6183 7127
Формы. Реактивный подход.
Формы. Шаблонный подход.
Формы в Angular
Subject
Observable. Subscribe и Unsubscribe
Route. Обновление шаблона
Route Resolving
Route передача статичных данных
Route. Контроль навигации с помощью сервиса
Route. Защита роутера
Route. Вынос настроек роутера
Route. Переключения и параметры
JavaScript операторы
Сервисы
Структурные директивы
Binding свойств директив
HostListener и HostBinding
Директива атрибута
Навигация. Передача данных событиями
События и жизненный цикл
ng-content
Инкапсуляция стилей и ссылки
Связывание свойств и событий
Компонент и модель
Директива ngFor
Angular CSS и Style
Динамические шаблоны в Angular
События
Компонент и данные
Шаблон и стили компонента
Создание компонентов в Angular
TypeScript, Bootstrap, Main.ts
Установка и первый запуск Angular
Возможно, вам будет интересно
JavaScript операторы
JavaScript операторы, которые важно знать для работы с Angular
Динамические шаблоны в Angular
В данном руководстве рассмотрим двухстороннее связывание данных. Создание динамических шаблонов, меняющих свое состояние в зависимости от действий пользователя, с помощью двухстороннего связывания данных и директивы ngIf.
Структурные директивы
Что такое структурные директивы. Встроенные и собственные структурные директивы.
TypeScript, Bootstrap, Main.ts
TypeScript - это суперсет, расширяющий возможности JavaScript наличием типов, классов, интерфейсов и т.д. Браузер не умеет выполнять TypeScript файлы, по этому их нужно компилировать в JS.