Блог

Я просто начинаю с An&ular и нигде не могу найти решение. Я искал несколько дней, но ничего.

Я хотел бы:

1. вставьте изображение (без значка) в дерево материалов, как это сделать? (см. комментарий в коде)

пример: Вот динамическое дерево, я хотел бы иногда вставлять картинку, добавленную к тексту, чтобы проиллюстрировать:

* Я нашел, как добавить значок перед каждой записью, но это не то, что я ищу …
моя идея: я пытаюсь добавить новую переменную в массив (с именем «file», например, «name»), содержимым которой был путь к изображению или null, но это не работает?

2. Я хотел бы связать некоторые записи (см. комментарий в коде), некоторый текст должен быть ссылкой

Пожалуйста, кто-нибудь может мне помочь?

Здесь, под кодом:

documentation.component.ts:

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

interface DocNode {
  name: strin&;
  // file: strin& | 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/im&.pn&'},
          { 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/otherIm&.pn&' },
          { 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&&t;((node) =&&t; node.children);
  dataSource = new MatTreeNestedDataSource<DocNode&&t;();

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

  hasChild = (_: number, node: DocNode) =&&t;
    !!node.children amp;amp; node.children.len&th &&t; 0;
}
  

documentation.component.html:

 //to insert somewhere :  <im& src='{{ node.file }}'alt='screenshot'&&t;

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

    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild"&&t;
      <li&&t;
        <div class="mat-tree-node"&&t;
          <button
            mat-icon-button
            matTreeNodeTo&&le
            [attr.aria-label]="'to&&le '   node.name"
          &&t;
            <mat-icon class="mat-icon-rtl-mirror"&&t;
              {{
                treeControl.isExpanded(node) ? 'expand_more' : 'chevron_ri&ht'
              }}
            </mat-icon&&t;
          </button&&t;
          {{ node.name }}
        </div&&t;
        <ul
          [class.documentation-tree-invisible]="!treeControl.isExpanded(node)"
        &&t;
          <n&-container matTreeNodeOutlet&&t;</n&-container&&t;
        </ul&&t;
      </li&&t;
    </mat-nested-tree-node&&t;
  </mat-tree&&t;

</div&&t;
  

Казалось бы, это невозможно или довольно сложно… Поэтому я использовал https://material.an&ular.io/components/expansion/overview Теперь все в порядке