Создать оглавление из заголовков - PullRequest
Новая
       8

Создать оглавление из заголовков

0 голосов
/ 09 декабря 2018

В Angular, как я могу создать оглавление из элементов заголовка на странице?

HTML: 

<article id="page">

    <ul id="page-toc">
       <!-- auto-generated toc-items go here -->
    </ul>

    <h2>Foo</h2>
    <p>lorem ipsum...</p>

    <h2>Bar</h2>
    <p>lorem ipsum...</p>

</article>

TS: 

export class MyComponent implements OnInit {

    createToc() {
        let elemArticle = document.getElementById("page");
        var myArrayOfNodes = [].slice.call( elemArticle.querySelectorAll("h2") );

        var toc = document.getElementById("page-toc");

        myArrayOfNodes.forEach( function(value, key, listObj) {
            var li = toc.appendChild(document.createElement("li"));
            li.innerHTML = value.innerHTML;
    })

    ngOnInit() {
        this.createToc();
    }
}

Это работает без ошибок, и элементы li появляются на странице.Однако CSS, определенный в my-component.scss, к ним не применяется.Это заставляет меня поверить, что Angular на самом деле не знает об автоматически сгенерированных элементах li.

Каков способ Angular для этого?

1 Ответ

0 голосов
/ 09 декабря 2018

вы можете добавить класс в свой li с помощью: 

li.className = "test"

и установить стиль для тестирования класса в глобальном файле styles.css вашей папки src, например, в вашем файле styles.css: 

.test{
  color: red;
}

DEMO

или вы можете добавить префикс ксс с помощью: host / deep /, в вашем компоненте css: 

:host /deep/ .test{
  color: red;
}

DEMO

или установите инкапсуляцию на ViewEncapsulation.None и используйте компонент css: 

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

update :

вы можете определить tocPagechild в вашем html и отправьте заголовки tocPage, чтобы перечислить их на странице:

app-component.html: 

<article id="page">    
    <page-toc [elements]="titles"></page-toc>
    <h2>Foo</h2>
    <p>lorem ipsum...</p>

    <h2>Bar</h2>
    <p>lorem ipsum...</p>
</article>

app-component.ts: 

export class AppComponent  {

  public titles: string[] = []
  constructor(){}

  ngOnInit(){
      this.createToc();
  }
  createToc() {
    let elemArticle = document.getElementById("page");
    var myArrayOfNodes = [].slice.call( elemArticle.querySelectorAll("h2") );
    console.log(myArrayOfNodes)
    myArrayOfNodes.forEach((value, key) => {
      this.titles.push(value.innerHTML)
    })
  }
}

page-toc.component.ts 

export class PageToc  {
  @Input() elements: string[];
}

page-toc.component.html 

<ul id="page-toc">
  <li class="title" *ngFor="let element of elements">
    {{element}}
  </li>
</ul>

page-toc.component.css: 

.title{
  color: red;
}

DEMO .

...