розетка маршрутизатора не заполнена - PullRequest
Новая
       43

розетка маршрутизатора не заполнена

0 голосов
/ 25 сентября 2019

проблем со стеком

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

У меня естьдочерний компонент со своим собственным модулем и маршрутами (это тестовый пример для фактического использования позже). 

<section class="routed component">
  <header>
    <h1>Routed Component</h1>
  </header>
  <router-outlet name="routed"></router-outlet>
</section>

это модуль загружает модуль маршрутизации: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DefaultComponent } from './default/default.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path:  '', pathMatch: 'full', redirectTo: '/default' },
  { path: 'default', component: DefaultComponent, outlet: 'routed' },
  { path: 'second', component: SecondComponent, outlet: 'routed' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class RoutedRoutingModule { }

, и он включенв маршруте по умолчанию для приложения: 

<article class="routable component main">
  <app-card>static card</app-card>
  <app-card>
    <app-routed></app-routed>
  </app-card>
</article>

Трассировка не показывает никаких попыток загрузить какой-либо контент в названном маршруте.Так что я не вижу своего сообщения «по умолчанию работает».Но я могу принудительно настроить маршрутизацию в routed.component.ts: 

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

@Component({
  selector: 'app-routed',
  templateUrl: './routed.component.html',
  styleUrls: ['./routed.component.scss']
})
export class RoutedComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.navigate([
      {
        outlets: {
          routed: [ 'default' ]
        }
      }
    ],
    { skipLocationChange: true });
  }
}

, к сожалению, хотя я вижу событие маршрута, 

Router Event: NavigationEnd
platform-browser.js:211 NavigationEnd(id: 2, url: '/main(routed:default)', urlAfterRedirects: '/main(routed:default)')
platform-browser.js:211 NavigationEnd {id: 2, url: "/main(routed:default)", urlAfterRedirects: "/main(routed:default)"}

Я все еще не вижу вывод в моемименованная розетка маршрутизатора: 

<article _ngcontent-dmo-c1="" class="routable component main">
  <app-card _ngcontent-dmo-c1="" _nghost-dmo-c2="">
    <section _ngcontent-dmo-c2="" class="component card">static card</section>
  </app-card>
  <app-card _ngcontent-dmo-c1="" _nghost-dmo-c2="">
    <section _ngcontent-dmo-c2="" class="component card">
      <app-routed _ngcontent-dmo-c1="" _nghost-dmo-c3="">
        <section _ngcontent-dmo-c3="" class="routed component">
          <header _ngcontent-dmo-c3=""><h1 _ngcontent-dmo-c3="">Routed Component</h1></header>
          <router-outlet _ngcontent-dmo-c3="" name="routed"></router-outlet>
        </section>
      </app-routed>
    </section>
  </app-card>
</article>

Если я сделаю маршрутизатор доступным из консоли, я увижу это: 

router.config
(8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {path: "", pathMatch: "full", redirectTo: "/main"}
1: {path: "main", pathMatch: "prefix", component: ƒ}
2: {path: "404", component: ƒ}
3: {path: "**", redirectTo: "/404"}
4: {path: "", pathMatch: "prefix", component: ƒ}
5: {path: "", pathMatch: "full", redirectTo: "/default"}
6: {path: "default", outlet: "routed", component: ƒ}
7: {path: "second", outlet: "routed", component: ƒ}
...