Является ли @ Component + router-outlet единственным способом использования многоразового шаблона в Angular 7?

Question

Я следовал официальному учебнику (https://angular.io/guide/router) по маршрутизации и нескольким другим источникам, и я не уверен, является ли @Component подходящим подходом для простых шаблонов.

Моя цель состояла в том, чтобы найтикомпонент панели, который я могу разместить, например, на целевой странице в качестве 1-го раздела, затем, когда пользователь не находится на целевой странице - поместите его в заголовок и, возможно, даже где-то еще. В основном это автономная вещь, которая работает где угодно сама по себе.

Существует это учебное приложение https://stackblitz.com/angular/empolopovbx, где они используют имя router outlets для создания выхода с именем popup, которое будет содержать компонент для создания crisis message. Теперь все в порядке, но вся механика работает в основном какоткрытие 2 страниц (ссылаясь на routes/components в Angular) и размещение одной в главном (неназванном) выходе, а второе (сообщение о кризисе) в указанном popup выходе.

Это переводит на такие ссылки, как:

• site / superheroes (popup: compose)

Так что для каждой названной розетки маршрутизатора я получу (router-outlet-name: component) в ссылке.

Тогда я подумал - действительно ли так можно поступить, когда у меня есть несколько выходов в родительских компонентах, и вы хотите повторно использовать произвольное количество компонентов во всем приложении?Так как я все еще плохо знаком с Angular, это просто беспокоит меня - я неправильно понимаю использование названных выходов маршрутизатора?Должны ли они даже использоваться в «больших количествах»?Например, страница, подобная этой:

app.component:

<header>...</header>
<router-outlet>
<footer>...</footer>

landing.component:

<section class="landing-swiper">
    ...
</section>
<section class="landing-search">
    <router-outlet name="search-bar">
<section>
<section class="landing-news">
    <router-outlet name="news-window">
<section>
<section class="landing-contact">
    <router-outlet name="contact-form">
<section>

Таким образом, в основном app.component является основным, дающим нам заголовоки я и нижний колонтитул хотим, чтобы целевая страница (landing.component) была вставлена ​​как контент в нее.

Но тогда landing.component также использует несколько других (которые также могут использоваться в других местах, например * 1041)* который здесь будет вставлен в маршрутизатор contact-form, также будет размещен на странице "О компании".

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

Answer 1

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

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

Я думаю, что довольно необычно иметь более двух уровней маршрутизации в приложении Angular.Возможно, но очень необычно.

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

Если все, что вам нужно, это чтобы один компонент отображался внутри другого, то вам просто нужно поместить html-тег в шаблон родителя, который использует «селектор» дочернего компонента

Так, например, гдеу вас есть

<section class="landing-search">
    <router-outlet name="search-bar">
<section>

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

В этом случае, если ваша панель поискаСелектор компонента, например, «посадочная строка поиска», тогда вы будете использовать:

<section class="landing-search">
    <landing-search-bar></landing-search-bar>
<section>