Question

我想构建一个动态的面包屑功能。虽然效果很好，但它会使用第一个元素进行渲染，因此子组件首先会获得第一个链接，然后其余的都会跟随。

我想要的是在子组件中，以显示从父组件传递给它的链接的正确长度。当前，它显示了所有链接（可以很好地循环它们），但是长度仅等于在父组件的oninit上设置的第一个链接。

子组件：

export class BCComponent implements OnInit {
    @Input() breadcrumb:string[];

    last_link_index:number=0; //what is the array index of the last element?    
    constructor() {}

    isActive(row){
     let reply:string='';
     //is it the last link in the breadcrumb?
     if(row==this.breadcrumb.length-1){
        reply='active';
     }
     return reply
    }

    ngOnInit() {

   this.last_link_index=this.breadcrumb.length;

   console.log(this.last_link_index,this.breadcrumb.length,this.breadcrumb);
    }
}

在模板中，输出应该不为链接数组中的最后一个元素创建链接。

<li *ngFor="let link of breadcrumb;let x=index;" class="breadcrumb-item {{isActive(x)}}">
<i class="fa {{link.icon}}"></i> <a routerLink="/{{link.link}}" href="javascript:void(0)"> {{link.name}}</a>
</li>

父组件：

在父组件中，链接将取决于情况和深度。例如，我有以下链接：

links=[{link:'member/homes',icon:'fa fa-home',text:'Homes Owned'},{link:'#',icon:'fa fa-home-o',text:'RSD8987'}]

如果这样固定，则链接及其长度正确，因此呈现良好。但是，如果我进一步修改了后端调用中的链接，则不会，如下所示：

父组件：

 ngOnInit() {
    this.breadcrumb.push(
        {
        'name':"Plots",
        'link':'members/plots/',
        'icon':'fa-home'
        }
        );

    //get the plot we wanna work with here first
    this.sub = this.route.params.subscribe(params => {
    this.requested_home = params['home_id'];

    //Get home description first. build links only if it is found
    this.individual_service.homeDetail(this.requested_home,'n').subscribe(
          data => {

            //home found. So build the links
      this.breadcrumb.push(
        {
        'name':"Text",
        'link':'members/homes/',
        'icon':'fa-tree'
        },

        {
        'name':"Home Detail",
        'link':'#',
        'icon':'fa-sticky-note'
        }
        );

现在的问题是子组件报告了所有链接，但长度仅为1（在初始化开始时设置）。

Answer 1

实施ngOnChanges

ngOnChanges(changes: SimpleChanges) {
  if(changes.breadcrumb) {
     this.last_link_index=this.breadcrumb.length;
  }
}

从父母到孩子成角度2的动态面包屑

1 个答案: