Angular 基于角度中的布线刷新零部件数据

我有一个辅助导航，其中的数据需要根据路线进行更改。请找到下面的图片

需要在组件上显示的所有数据存储如下

export const Items: SecondaryNavItems[] = [
    {
        icon: 'far fa-copy', title: 'Newly Added Processes'
    },
    {
        icon: 'far fa-copy', title: 'Terminated Processes'
    },
    {
        icon: 'far fa-copy', title: 'Test Processes'
    },
    {
        icon: 'far fa-copy', title: 'Test Processes'
    }
];

这是component.ts文件

export class SecondaryNavigationComponent implements OnInit {

  public navItems: any[];

  constructor() { }

  ngOnInit() {
    this.navItems = Items.filter(navItem => navItem);
  }

}

---

有人能告诉我实现这一点的最佳方法吗？

为了让它在同一个组件中工作，您可以使用订阅，以便在路由更改时触发，如下所示：

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.animal = params.get("animal")
  })
}

---

将静态数据传递到

路由

的最佳方法是使用

路由

配置中的

数据

属性

const appRoutes: Routes = [
  {path: 'process', component: SomeComponent , data:{navItems: Items}},
  {path: '**', redirectTo: 'not-found'}  
]

并且可以使用

ActivatedRoute

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

@Component({
  selector: 'some-component',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {
  navItems;
  constructor(private router: ActivatedRoute) { }

  ngOnInit() {
    //this.navItems= this.router.snapshot.data['navItems'];
    this.router.data.subscribe((data)=>{
      this.navItems= data['navItems'];
    })
  }

}

---

我想我找到了一个更好的方法来实现这一点

我的配置文件：

import { SecondaryList } from '../../models/secondary-nav';

export const Items: SecondaryList[] = [
    {
        type: 'bot',
        list: [
            {
                icon: 'far fa-copy', title: 'Test Processes 1'
            },
            {
                icon: 'far fa-copy', title: 'Test Processes 2'
            }
            ,{
                icon: 'far fa-copy', title: 'Test Processes 3'
            }
        ]
    },
    {
        type: 'process',
        list: [
            {
                icon: 'far fa-copy', title: 'Test Processes 4'
            },
            {
                icon: 'far fa-copy', title: 'Test Processes 5'
            }
            ,{
                icon: 'far fa-copy', title: 'Test Processes 6'
            }
        ]
    }
];

组件技术

ngOnInit() {
    this.navItems = Items.filter(navItem => {
      return navItem.type === 'bot'
    });
  }

component.html

<div class = "row">
    <ng-container *ngFor ="let navItem of navItems">
        <div class = "col-md-3 axi-tile axi-tile--primary" *ngFor="let list of navItem.list">
                <div class = "axi-tile__icon">
                    <i [class]="list.icon"></i>
                </div>
                <div class = "axi-tile__text">{{list.title}}</div>
            
            </div>
    </ng-container>
</div>

{{list.title}

不确定您的问题是什么。为什么不基于管线加载组件呢？在触发路由时，在每个组件中使用ngOnInit加载数据。@Muirik我认为在同一任务中使用多个组件不是一个好方法。相反，我希望根据路由将数据注入到相同的组件中。您是否在如下路由中传递任何内容

localhost:4200/get？terminatedProcess

？如果您希望在相同的

组件中执行此操作，则可以在组件的
HTML
部分使用
显示/隐藏
和
If
条件。管理
typescript中的逻辑file@Wasim尽管如此，我仍然认为有一种基于逻辑将数据注入组件的正确方法，它应该是实现这一点的正确方法。