Не работает router outlet

Маршрутизация

Определение маршрутов

Маршрутизация позволяет сопоставлять запросы к приложению с определенными ресурсами внутри приложения.

Ключевым для работы маршрутизации является модуль RouterModule , который располагается в пакете @angular/router . Поэтому при работе с маршрутизацией этот пакет должен быть указан в списке зависимостей в файле package.json :

Для определения маршрутов возьмем базовую структуру приложения:

Для работы с маршрутизацией в первую очередь стоит определить базовый адрес приложения. Для этого возьмем веб-страницу index.html и добавим в секцию элемент :

В качестве базового адреса будет рассматриваться корень приложения.

Каждый маршрут сопоставляется с определенным компонентом. Поэтому добавим в проект ряд компонентов. Так, добавим в папку src/app новый файл home.component.ts :

Этот простенький компонент выводит обычный заголовок.

Далее добавим в папку src/app новый файл about.component.ts :

И также добавим еще один файл not-found.component.ts :

RouterModule и добавление маршрутов

Итак, кроме главного компонента AppComponent в проекте определено еще три компонента, каждый из которых просто выводит некоторый заголовок. Для каждого из этих компонентов мы можем определить свой маршрут. Для этого изменим код модуля AppModule:

Во-первых, здесь импортируются модуль маршрутизации RouterModule и класс Routes, представляющий коллекцию маршрутов:

Далее определяется сам набор маршрутов:

Здесь определено три маршрута, каждый из которых будет обрабатываться отдельным компонентом. Для указания маршрута применяется параметр path . Например, путь «about» будет представлять запрос типа «http://localhost:3000/about» и будет обрабатываться классом AboutComponent.

Если запрос не содержит никаких сегментов, например, просто имя домена «http://localhost:3000/», то такой запрос будет сопоставляться с путем «» (пустая строка) и будет обрабатываться компонентом HomeComponent.

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

Чтобы применить маршруты, они передаются в метод RouterModule.forRoot(appRoutes) :

Метод RouterModule.forRoot() возвращает модуль, который содержит сконфигурированный сервис Router . Когда приложение загружается, Router выполняет начальную навигацию по текущему URL, который стоит в адресной строке браузера.

RouterOutlet

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

Но чтобы можно было внедрить в AppComponent тот компонент, который обрабатывает запрос, необходимо использовать элемент RouterOutlet. Для этого изменим код AppComponent:

На место элемента будет рендериться компонент, выбранный для обработки запроса.

Запустим приложение. По умолчанию приложение запускается без сегментов, поэтому запрос обрабатывает HomeComponent:

Перейдем по пути «localhost:xxxx/about»:

При переходе к любому другому адресу сработает компонент NotFoundComponent:

URL Matching и порядок маршрутов

Когда будет выполняться переход по определенному пути, например, «/about», система маршрутизации сопоставляет последовательно URL запроса с параметрами path у каждого маршрута. Данный процесс называется url matching. В частности, система маршрутизации сопоставит url «/about» с маршрутом < path: 'about', component: AboutComponent>. И компонент AboutComponent будет выбран для обработки запроса по пути /about .

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

То в этом случае запрос /about будет обрабатываться первым маршрутом, поскольку он соответствует запросу /about (путь ‘**’ соответствует любому набору символов). Поэтому маршрут

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

Переадресация

Вполне возможно, что по какому-то маршруту мы захотим сделать переадресацию по другому пути. Например, в случае, если нужного маршрута для запроса не найдено, мы можем переадресовать на главную страницу:

Для переадресации указываем параметр redirectTo . Его значение представляет путь переадресации. В данном случае слеш указывает на первый маршрут или на главную страницу.

Также мы можем задать критерий соответствия строки запроса маршруту с помощью параметра pathMatch :

Значение pathMatch:’full’ указывает, что запрошенный адрес должен полностью соответствовать маршруту, то есть должно быть полное соответствие. Например, запрос /contact полностью соотвествует маршруту < path: 'contact', redirectTo: '/about', pathMatch:'full'>, поэтому будет выполняться переадресация на адрес /about .

А запрос /contact/5 не будет соответствовать этому маршруту, так как после «contact» идут другие сегменты.

Источник

не работает в Angular 9

Я столкнулся с некоторыми проблемами с угловым 9, не работает. Мой файл, как это:

Когда я запускаю ng serve, это всегда означает:

ОШИБКА в src / app / layout / layout.component.html: 2: 1 — ошибка NG8001: «router-outlet» не является известным элементом: 1. Если «router-outlet» является угловым компонентом, то убедитесь, что он часть этого модуля. 2. Если «router-outlet» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» к «@ NgModule.schemas» этого компонента, чтобы подавить это сообщение.

Кто-нибудь может помочь мне разобраться?

Кроме того, в файле layout.component.html не отображается дочерний контент, например компонент формы, компонент таблицы или компонент панели мониторинга.

2 ответа

Вы должны импортировать RouterModule

У вас есть следующие модули:

• AppModule
• LayoutModule
• AppsRouteModule (это просто модуль маршрутизации)

В Angular, когда вы создаете модуль, этот модуль имеет доступ только к тем компонентам, директивам и т. Д., Которые вы объявили внутри него.

Этот AppModule имеет доступ к любому Компоненту или Директиве, которые вы в нем декларируете, или к любому другому элементу, который вы экспортируете из одного из внутренних модулей (например, LayoutModule).

Затем у нас есть LayoutModule, внутри которого объявлен только LayoutComponent.

С этой настройкой все, что вы экспортируете из LayoutModule, будет доступно для использования в AppModule, но LayoutModule не будет иметь доступа к тому, что объявлено в AppModule, это дочерний элемент AppModule, если вы будете.

Так как модуль маршрутизации объявлен только в AppModule, LayoutModule не знает об этом, Angular просто не обрабатывает такие модули, если вы хотите использовать маршрутизацию в LayoutModule, импортируйте его в этот модуль, если вы хотите используйте модуль маршрутизации в обоих (что я не думаю, что это хорошо), вы должны создать SharedModule, импортировать и экспортировать туда модуль маршрутизации, а затем импортировать SharedModule в модуль App и Layout.

Источник

Использование нескольких под Angular Material (8) не работает

Попытка переопределить проблему, так как у меня есть больше информации.

Я работаю с Angular Material (8) — вместе с пакетом MDBootstrap . У меня есть 2 области. Одна из них относится к области входа / авторизации (AUTH) , а другая относится к области «панели мониторинга» (доступ к которой следует получить после входа в систему) (DASHBOARD) .

Вот код, который работает с AUTH и MYDASHBOARD — AUTH интерпретируется Angular как primary . Я назвал второе определение router-outlet mydashboard

ПРИМЕЧАНИЕ: ВСЕ ДЛЯ (AUTH) РАБОТАЕТ — С ЭТОЙ ЧАСТЬЮ НИЧЕГО НЕ НРАВИТ. ПРОБЛЕМА С (ИНСТРУМЕНТ)

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

ПРИМЕЧАНИЕ. ВСЕ ВЫПОЛНЯЕТСЯ В ТОНКОМ ЗДЕСЬ, приборная панель запускается, и она сохраняется в задаче, которая начинается с использования меню.

При нажатии на область «Клиенты» я ожидаю, что «Информация о клиенте» будет помещена в из-за того, как home.component.html был определен.

Примечание : Обработка не идет к:

Он идет по адресу: на странице: app.component.html

ВОПРОС: Почему это происходит? Я делаю это правильно? Есть ли лучший способ?

Я ознакомился со следующими документами .

Но пока ничего не нашел.

Любая информация или идеи будут высоко оценены.

Источник

не работает в Angular 9

Я столкнулся с некоторыми проблемами с angular 9, не работает. Мое досье вот такое:

Когда я запускаю ng serve, он всегда указывает:

ERROR в src/app/layout/layout.component.html:2:1 — ошибка NG8001: ‘router-outlet’ не является известным элементом: 1. Если ‘router-outlet’ является компонентом Angular, то убедитесь, что он является частью этого модуля. 2. Если ‘router-outlet’ является веб-компонентом, то добавьте ‘CUSTOM_ELEMENTS_SCHEMA’ к ‘@NgModule.schemas’ этого компонента, чтобы подавить это сообщение.

Кто — нибудь может помочь мне разобраться в этом?

Кроме того, в файле layout.component.html не отображается дочернее содержимое, такое как компонент формы, компонент таблицы или компонент панели мониторинга.

2 ответа

Я новичок в angular 4. Я обнаружил, что в angular есть способ передавать данные из родительского компонента в дочерний компонент, используя @Input, как показано ниже: Мой вопрос заключается в том, как сделать то же самое с помощью маршрутизатора. В.

Мой компонент приложения (компонент Angular 2, пониженный для index.html) содержит следующее:

вы должны импортировать RouterModule

layout.component.html

app.component.html

Давайте займемся этим.

У вас есть следующие модули:

• AppModule
• LayoutModule
• AppsRouteModule (который является просто модулем маршрутизации)

В Angular, когда вы создаете модуль, этот модуль имеет доступ только к компонентам, директивам и т. д., которые вы объявляете внутри него.

AppModule

Этот AppModule имеет доступ к любому компоненту или директиве, которые вы объявляете в нем, или к любому другому элементу, который вы экспортируете из одного из внутренних модулей (например, LayoutModule)

LayoutModule

Тогда у нас есть LayoutModule, который имеет только LayoutComponent, объявленный внутри.

При такой настройке все, что вы экспортируете из LayoutModule, будет доступно для использования в AppModule, но LayoutModule не будет иметь доступа к тому, что объявлено в AppModule, это дочернее устройство AppModule, если хотите.

Поскольку модуль маршрутизации объявлен только в AppModule, LayoutModule не знает об этом, Angular просто не обрабатывает такие модули, если вы хотите использовать маршрутизацию в LayoutModule, импортируйте ее в этот модуль, если вы хотите использовать модуль маршрутизации в обоих (что я не думаю, что это хорошо), вы должны создать SharedModule, импортировать и экспортировать модуль маршрутизации туда, а затем импортировать SharedModule как в приложение, так и в модули макета.

Читайте также:  Не работает кабельное телевидение билайн что делать

Похожие вопросы:

Я использую angular4 и пытаюсь создать ссылку на маршрутизатор. Ссылка маршрутизатора работает, но отображает шаблон дважды. Ниже приведен мой код в компоненте: import < Component >from.

С Angular 2, есть ли какой-либо способ, чтобы суб-маршрут не отображался в главном теге Например : url : http://mywebsite.com/ MainComponent.ts.

Я разрабатываю приложение angular 2. В MainComponent у меня есть ссылки на дочерние компоненты с @ViewChild . В этом MainComponent у меня есть , где я загружаю различные.

Я новичок в angular 4. Я обнаружил, что в angular есть способ передавать данные из родительского компонента в дочерний компонент, используя @Input, как показано ниже: и

Мой компонент приложения (компонент Angular 2, пониженный для index.html) содержит следующее:

В моем проекте у меня есть два использования на вложенном уровне, он работает отлично, но когда я использую третий, покажите эту ошибку в консоли If ‘router-outlet’ is an Angular component, then.

Я занимаюсь этой проблемой уже несколько часов. Я перепробовал буквально все, но не могу заставить его работать. Следующая ошибка продолжает появляться: zone.js:522 Unhandled Promise rejection.

Я обнаружил, что не сохраняет CSS/SCSS styling . Я создаю модуль для авторизации. В рамках этого модуля у меня есть login, register и т. д. . Я также.

Попытка переопределить проблему, так как у меня есть еще немного информации. Я работаю с Angular Material (8) — вместе с пакетом MDBootstrap . У меня есть 2 области. Одна из них-это область, которая.

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

Источник

«Роутер-аутлет» не является известным элементом

У меня есть проект MVC 5 с угловым интерфейсом. Я хотел добавить маршрутизацию, как описано в этом руководстве https://angular.io/guide/router. Так что в мой _Layout.cshtml я добавил

И создал мою маршрутизацию в моем app.module. Но когда я запускаю это, я получаю следующую ошибку:

В моем app.comпонентная строка

Выдает ошибку, сообщающую, что Visual Studio не может разрешить тег ‘router-outlet’. Любые предложения, как я могу исправить эту ошибку? Я пропускаю ссылку или импорт или просто что-то пропускаю?

Ниже приведены мои package.json, app.component и app.module

11 ответов

Нет необходимости настраивать экспорт в AppModule , потому что AppModule не будет импортирован другими модулями в вашем приложении.

Эта проблема была со мной также. Простой трюк для этого.

Используйте его как в порядке выше. Первый импорт, а затем объявления. Это сработало для меня.

Просто лучше создать компонент маршрутизации, который будет обрабатывать все ваши маршруты! С угловой документации сайта! Это хорошая практика!

ng создать модуль app-routing —flat —module = app

Приведенный выше CLI генерирует модуль маршрутизации и добавляет в модуль приложения все, что вам нужно сделать из сгенерированного компонента, это объявить ваши маршруты, также не забудьте добавить это:

В ваш декоратор ng-модуля, так как он не поставляется с сгенерированным модулем app-routing по умолчанию!

Источник