#selector работает только для корневого элемента, а не для дочернего в угловых - PullRequest
Новая
       20

#selector работает только для корневого элемента, а не для дочернего в угловых

3 голосов
/ 07 июля 2019

У меня возникает путаница с селектором, когда я определяю селектор для корневого элемента (компонента App), используя идентификатор, как показано ниже. Я могу отобразить компонент

index.html 

<body>

  <div id="root"></div>

</body>

app.component.ts 

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

  @Component({
     selector: '#root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'helloworld';

}

app.component.html 

div class='my-text' >My Root Component</div>


<div id='child'></div>

Я могу отобразить родительский компонент, однако я не могу отобразить дочерний компонент, если я следую тому жеПравило определения в дочернем селекторе 

@Component({
    selector: '#child',
    templateUrl: './child1.component.html',
    styleUrls: ['./child1.component.scss']
})

Но я могу отобразить дочерний компонент, если изменить селектор на selector=[id=child]

Почему определение селектора, работающее для родителя, не работает в дочернем?

Угловая версия 8

1 Ответ

2 голосов
/ 07 июля 2019

Угловой компилятор использует следующее регулярное выражение для анализа селектора: 

const _SELECTOR_REGEXP = new RegExp(
    '(\\:not\\()|' +           //":not("
        '([-\\w]+)|' +         // "tag"
        '(?:\\.([-\\w]+))|' +  // ".class"
        // "-" should appear first in the regexp below as FF31 parses "[.-\w]" as a range
        '(?:\\[([-.\\w*]+)(?:=([\"\']?)([^\\]\"\']*)\\5)?\\])|' +  // "[name]", "[name=value]",
                                                                   // "[name="value"]",
                                                                   // "[name='value']"
        '(\\))|' +                                                 // ")"
        '(\\s*,\\s*)',                                             // ","
'g');

Как вы можете видеть, селектора по идентификатору нет.

Более того, ваши селекторы #root и #child будут сопоставлены с root и child элементами.Итак, если вы замените <div id='child'></div> на <child></child>, дочерний компонент будет визуализирован.

Почему работает корневой селектор?

Это потому, что корневой компонент обрабатывается специально и загружается как динамический компонентиспользуя следующий код: 

componentFactory.create(Injector.NULL, [], selectorOrNode, ngModule);
                                           ^^^^^^^^^^^^^^
                                             #root

Где под капотом Angular использует document.querySelector(selectorOrNode) для поиска выделенного элемента, если мы предоставили строку.

С другой стороны, все вложенные компоненты отображаются только еслиселекторы совпадают с элементами в шаблоне.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...