Как создать несколько угловых роутеров внутри друг друга? - PullRequest
Новая
       41

Как создать несколько угловых роутеров внутри друг друга?

0 голосов
/ 13 апреля 2020

это фото ниже моего сценария проекта. Я работаю с Angular8.

enter image description here

publi c .component работает внутри app.component. Теперь я хочу, чтобы message.component запускался внутри publi c .component.

app.component. html: 

<h2>appHeader</h2>
    <router-outlet name="test"></router-outlet>
<h2>app footer</h2>

app.component.ts: 

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {  title = 'PersonalWebSite'; }

app.routing.module.ts: 

import { PublicComponent } from './Layout/public/public.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
    {path:'', outlet:'test',component:PublicComponent}
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

publi c .component. html: 

<h1>Header Public</h1>
    <a routerLink=""> About Me </a>
    <a routerLink="Message"> Message </a>
    <router-outlet></router-outlet>
<h1>Footer Public</h1>

publi c .component.ts : 

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
  styleUrls: ['./public.component.css']
})
export class PublicComponent {
  constructor() { }
}

publi c .routing.module.ts: 

import { AboutMeComponent } from '../../about-me/about-me.component';
import { MessageComponent } from '../../message/message.component';
import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {path:'',component:AboutMeComponent},
  {path:'Message',component:MessageComponent}

];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class PublicRoutingModule { }

message.component.routing.ts: 

import { PublicComponent } from './../Layout/public/public.component';
import { MessageComponent } from './message.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: 'Message',
    component: PublicComponent,
    children: [
      { path: '', component: PublicComponent }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }

publi c .component работает с app.component, но когда я нажимаю на routerLink, он вводит адрес (http: // localhost: 4200 / Message). Но сообщение компонента не запускается внутри publi c .component.

, пожалуйста, укажите мне.

...