Question

假设我有两个成分，Component1和Component2。其中Component2需要一些参数来呈现。

是否只能在Component2内显示Component1的内容。只需单击按钮即可触发这些参数？

例如，假设我有GalleryComponent和ArtsComponent。

  { path: 'gallery', component: GalleryComponent },
  { path: 'arts', 
    children: [
      { path: '', component: ArtsComponent, data :{ name:"all" } },
      { path: 'author/:id', component: ArtsComponent, data :{ name:"author" }},
      { path: 'form/:id', component: ArtsComponent, data :{ name:"form" } },
    ]
  }

目前，我可以按照URLS的方式查看这两个信息，

localost:4200/gallery
localost:4200/arts
localost:4200/arts/author/1
localost:4200/art/form/1

我正在通过

进行导航

[routerLink]="['/arts/form', '1']"

这会将我带到新页面，即localost:4200/art/form/1，但是我不希望那样，我只想在我的URL上捕获GalleryComponent的内容，例如，

//gallery.component.html
<a [routerLink]="['/arts/form', '1']">Form1</a>
<a [routerLink]="['/arts/form', '2']">Form1</a>

<app-arts></app-arts>

Answer 1

您可以将几乎任何数量的组件彼此嵌套，只要该组件具有<router-outlet></router-outlet>即可在其中输出子路由的内容。 app.component的工作方式相同。因此，您需要做的就是将router-outlet放在galery.component.html内，并在路由配置中将ArtsComponent放在GaleryComponent的子级数组中。之后，您还可以调整ArtsComponent

的路线

[
  { 
    path: 'gallery', 
    component: GalleryComponent, 
  }, 
  { 
    path: 'arts', 
    component: GalleryComponent, 
    children: [ 
        { path: '', component: ArtsComponent, data :{ name:"all" } }, 
        { path: 'author/:id', component: ArtsComponent, data :{ name:"author"}}, 
        { path: 'form/:id', component: ArtsComponent, data :{ name:"form" }}, 
    ]
  },
]
----------------------------------
//gallery.component.html

<a [routerLink]="['/gallery/form', '1']">Form1</a>
<a [routerLink]="['/gallery']">All</a>
<a [routerLink]="['/gallery/author','1']">Author</a>

<router-outlet></router-outlet>

Answer 2

要实现此目的，您需要向<router-outlet>添加另一个gallery.component.html，然后将艺术作品路线添加为{{1} }

Answer 3

尝试一下。

export class Component1 {


}

在HTML中添加第二个组件：

<app-component2></app-component2>

如何在另一个Angular组件内显示Angular组件

3 个答案: