如何使用DynamicComponentLoader定位特定元素？

Question

背景

我有一个数据代表文件夹列表和文档类别;我通过网络界面从我们的信息管理软件中获取它。从每个项目ParentFolderNo的原始列表中我创建了一个具有children: any[]属性的对象 - 基本上我现在已经嵌套了项目列表;像这样的东西：

{
  id: 123,
  Guid: "8dcaae38-4dcc-48f7-bd91-c8b0cb725890"
  children: [
    {
      id: 234,
      Guid: "...."
    },
    {
      id: 345,
      Guid: "...."
      children: [...]
    }
  ]
}

实施

那里有更多的物品，有些拥有它自己的孩子，有些不是，但每一个都是独一无二的，并且有一个独特的Guid。从这个对象我需要创建UI元素，让用户选择特定的文件夹或类别，并限制搜索。您可以将其视为可选择的面包屑。我创建的组件使用DynamicComponentLoader来显示特定的树＆＃39;这些数据：

@Component({
  host: { "[attr.id]": "category.Guid" },
  selector: 'category-group',
  template: `
    <ul class="category__group">
      <li>
        <a (click)="select()">All Categories</a>
      </li>
      <li [class.selected]="child.selected" *ngFor="#child of category.children">
        <a *ngIf="!child.selected" (click)="select(child)">{{ child.Name }}</a>
        <b *ngIf="child.selected">{{ child.Name }}</b>
      </li>
    </ul>
  `,
})
class Category {
  public category: any;

  select(theCategory: any) {
    this.category.children.map(subcategory => subcategory.selected = false);
    if (theCategory) {
      theCategory.selected = true;
      // pass theCategory to CategorySelectComponent
      // to create new category-group... this works.
    }
  }
}

@Component({
  selector: 'category-select',
  template: `
    <b>Root</b> 
    <div #root></div>
  `,
})
export class CategorySelectComponent {
  @Input() root: any;

  constructor(
    private _dcl: DynamicComponentLoader, 
    private _eref: ElementRef, 
    private _inj: Injector
  ) {}

  ngOnInit() { this.create(this.root); }

  create(parent: any) {
    if (!parent.children) return;
    this._dcl
      .loadIntoLocation(Category, this._eref, 'root')
      .then(ref => ref.instance.category = parent)
  }
}

这样可行，但存在一个缺陷 - 它只是添加了新的<category-group>。当我选择不同的孩子时，我需要更换下面的类别组＆＃39;它。所以：

有没有办法用DynamicComponentLoader替换组件？

  create(parent: any) {
    if (!parent.children) return;
    // Guid":"8dcaae38-4dcc-48f7-bd91-c8b0cb725890"
    this._dcl
      .loadIntoLocation(Category, this._eref, 'root')
      .then(ref => ref.instance.category = parent)
  }

我可以使用此create()函数来获取所需的功能吗？如何在id="8dcaae38-4dcc-48f7-bd91-c8b0cb725890"中使用_dcl的元素？我试过other methods，但没有设法让这项工作......

感谢。