Angular Material树如何插入img /文件

Question

我刚从 Angular 开始，我在任何地方都找不到解决方案。我搜索了几天，但没有。

我想：

1. 在材质树中插入图片（无图标），怎么做？ （参见代码中的注释）

示例： 这里是一个动态树，我有时想在文字中插入图片，来说明：

*我找到了如何在每个条目之前添加一个图标，但这不是我要找的...
我的想法：我尝试在数组中添加一个新变量（命名为“文件”，如“名称”），其内容是图像的路径或null，但它不起作用？

1. 我想链接一些条目（参见代码中的注释），一些文本必须是链接

有人可以帮助我吗？

下面是代码：

documentation.component.ts：

import { NestedTreeControl } from '@angular/cdk/tree';
import { Component } from '@angular/core';
import { MatTreeNestedDataSource } from '@angular/material/tree';
// import { UserInformation } from 'src/app/interfaces/user-information/user-information';

interface DocNode {
  name: string;
  // file: string | null;
  children?: DocNode[];
}

const TREE_DATA: DocNode[] = [
{
    name: 'Parent title',
    children: [
      {
        name: 'Child Title ',
        children: [
          { name: 'To complete', // file : null },
          { name: 'To complete', // file: './assets/img.png'},
          { name: 'To complete', // file : null }, 
          { name: 'https://monsite.net/home.html', // file : null }, // *****linkify this one*****
        ],
      },
      {
        name: 'To complete',
        children: [
          { name: '1. To complete',// file : null },
          { name: '2. To complete', // file: './assets/otherImg.png' },
          { name: '3. To complete',// file : null},
          { name: '4. To complete',// file : null },
        ],
      },
    ],
  },
];

@Component({
  selector: 'app-documentation',
  templateUrl: './documentation.component.html',
  styleUrls: ['./documentation.component.scss'],
})
export class DocumentationComponent {
  title = 'Documentation Z2C';
  treeControl = new NestedTreeControl<DocNode>((node) => node.children);
  dataSource = new MatTreeNestedDataSource<DocNode>();

  constructor() {
    this.dataSource.data = TREE_DATA;
  }

  hasChild = (_: number, node: DocNode) =>
    !!node.children && node.children.length > 0;
}

documentation.component.html：

//to insert somewhere :  <img src='{{ node.file }}'alt='screenshot'>

<div class="documentation">
  <h2>{{ title }}</h2>
  <mat-tree
    [dataSource]="dataSource"
    [treeControl]="treeControl"
    class="documentation-tree"
  >
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
      <li class="mat-tree-node">
        <button mat-icon-button disabled></button>
        {{ node.name }}
      </li>
    </mat-tree-node>

    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
      <li>
        <div class="mat-tree-node">
          <button
            mat-icon-button
            matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.name"
          >
            <mat-icon class="mat-icon-rtl-mirror">
              {{
                treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'
              }}
            </mat-icon>
          </button>
          {{ node.name }}
        </div>
        <ul
          [class.documentation-tree-invisible]="!treeControl.isExpanded(node)"
        >
          <ng-container matTreeNodeOutlet></ng-container>
        </ul>
      </li>
    </mat-nested-tree-node>
  </mat-tree>

</div>

Answer 1

这似乎是不可能或相当困难的...... 所以我用https://material.angular.io/components/expansion/overview 现在好了