Angular: перезагрузка/обновление компонента или всего приложения и повторное использование логики в нескольких компонентах

Учебник Angular о том, как перезагрузить/обновить один компонент или все приложение и повторно использовать логику в нескольких компонентах.

Существует большая разница между перезагрузкой одного компонента и перезагрузкой всего приложения. Мы увидим, как оба могут быть достигнуты.

Это очень простое приложение. Существует 3 компонента: AppComponent, в котором размещается TestComponent, и TestComponent, в котором размещается ChildComponent.

У нас всего 2 цели:

1. Возможность перезагрузить текущий маршрут, дочерний маршрут, родительский маршрут и все приложение.
2. Используйте наследование, чтобы добавить эту функциональность в один компонент, чтобы любой другой компонент мог расширять и повторно использовать ее.

Давайте сначала проверим CommonFunctionalityComponent, который будут расширять компоненты AppComponent, TestComponent и ChildComponent.

В компоненте мы написали 2 метода: reloadComponent() для перезагрузки другого компонента или текущего маршрута и reloadPage() для перезагрузки всего приложения.

Функция reloadPage() говорит сама за себя.

В reloadComponent() мы приняли 2 аргумента: self и urlToNavigateTo.

Если self содержит значение true, это означает, что текущий маршрут необходимо перезагрузить.

2-й аргумент urlToNavigateTo нужен, только если self имеет значение false, потому что в этом случае, если мы не хотим перезагружать текущий маршрут, нам нужно указать путь, который мы хотим загрузить второй аргумент.

const url=self ? this.router.url :urlToNavigateTo;

Таким образом, константа URL будет содержать путь текущего маршрута, если аргумент self равен true, иначе она будет содержать значение аргумента urlToNavigateTo.

this.router.navigateByUrl(‘/’,{skipLocationChange:true}).then(()=>{
this.router.navigate([`/${url}`]).then(()=>{
console.log(`After navigation I am on:${this.router.url}`)
})
})

В приведенном выше фрагменте кода я сначала перехожу к '/' без изменения URL-адреса, о котором заботится свойство skipLocationChange. После этого перехода я перехожу к пути, содержащемуся в константе ссылка.

I. Давайте теперь посмотрим, как AppComponent расширяет CommonFunctionalityComponent.

Шаблон AppComponent: у нас есть 3 кнопки для перезагрузки текущего маршрута, для перезагрузки всего приложения и, наконец, для загрузки TestComponent.

reloadPage() наследуется от CommonFunctionalityComponent.

reloadCurrent() определяется классом AppComponent.

Класс AppComponent:

В классе AppComponent мы определили только reloadCurrent(), где мы вызвали reloadComponent(), унаследованный от CommonFunctionalityComponent.

Мы передали true в качестве аргумента функции reloadComponent(), что означает, что мы хотим перезагрузить текущий маршрут, а не переходить к какому-либо другому маршруту.

Вот так наше приложение выглядит сейчас. Как вы можете видеть в консоли, constructor() и ngOnInit() AppComponent выполнились:

1. Сначала я нажимаю кнопку Обновить текущий маршрут. Как вы можете видеть в консоли, навигация прошла успешно, но AppComponent не перезагрузился снова. AppComponent можно перезагрузить только путем перезагрузки всей страницы.

2. Затем мы нажимаем кнопку Обновить страницу, которая вызывает window.location.reload(). Это перезагрузит AppComponent, как и ожидалось. Выполнены constructor() и ngOnInit() AppComponent:

3. При нажатии на кнопку Load TestComponent загрузится TestComponent. Как вы можете видеть в консоли ниже, выполняются constructor() и ngOnInit() TestComponent:

II. Переходим к TestComponent.

Шаблон TestComponent. Этот шаблон имеет 4 кнопки, которые перезагружают текущий маршрут, перезагружают страницу, загружают ChildComponent и перезагружают ChildComponent:

Класс TestComponent:

В reloadCurrent() мы вызвали reloadComponent(), унаследованный от CommonFunctionalityComponent.

Мы передали true в качестве аргумента функции reloadComponent(), что означает, что мы хотим перезагрузить текущий маршрут, а не переходить к какому-либо другому маршруту.

reloadChild() также будет вызывать reloadComponent(), но с другими аргументами. Мы передаем false в качестве первого аргумента, чтобы указать, что мы не хотим перезагружать текущий маршрут, а второй аргумент указывает маршрут, который мы хотим перезагрузить.

1. Нажатие кнопки Обновить текущий маршрут приведет к выводу, как показано ниже. TestComponent constructor() и ngOnInit() выполняются снова.

2. Нажав кнопку Обновить страницу, вы снова перезагрузите все приложение. Выполняются constructor() и ngOnInit() компонентов AppComponent и TestComponent.

3. Нажав кнопку Загрузить дочерний компонент, вы загрузите дочерний компонент. Выполняются constructor() и ngOnInit() ChildComponent.

4. Нажав кнопку Reload ChildComponent,выполнит constructor() и ngOnInit() ChildComponent. и снова TestComponent.

III. Переходим к классу ChildComponent. Класс и шаблон говорят сами за себя, поскольку они следуют тому же шаблону, что и AppComponent и TestComponent.

Шаблон дочернего компонента:

Класс дочернего компонента:

1. Нажатие кнопки Обновить текущий маршрут снова выполнит constructor() и ngOnInit() дочернего компонента и тестового компонента.

2. Нажатие на кнопку Обновить страницу снова выполнит constructor() и ngOnInit() AppComponent, ChildComponent и TestComponent.

3. Нажав кнопку Обновить тестовый компонент, мы перейдем к маршруту /test и выполним constructor() и ngOnInit. () компонента TestComponent еще раз.

Весь код доступен по адресу:

Дальнейшее чтение

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку. Подпишитесь на нас в Twitter, LinkedIn, и Раздор.