Angular Material树如何插入img /文件

问题描述

我只是从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: 'https://monsite.net/home.html',// *****linkify this one*****
        ],},{
        name: 'To complete',children: [
          { name: '1. To complete',{ name: '2. To complete',// file: './assets/otherImg.png' },{ name: '3. To complete',// file : null},{ name: '4. To complete',],];

@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>

解决方法

似乎不可能或很难... 所以我用了https://material.angular.io/components/expansion/overview 现在可以了