javascript - #selector funktioniert nur für das Wurzelelement, nicht für das Kind in Angular

Ich habe eine Verwirrung bezüglich des Selektors, wenn ich den Selektor für das Wurzelelement (App-Komponente) mit einer ID wie unten definiere, kann ich die Komponente rendern.

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>

Ich kann die übergeordnete Komponente rendern, aber ich kann die untergeordnete Komponente nicht rendern, wenn ich derselben Regel im Kind-Selektor folge.

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

Aber ich kann die Kindkomponente rendern, wenn ich den Selektor zu selector=[id=child] ändere

Warum funktioniert die Selektordefinition für das übergeordnete Element im Kind nicht?

Angular Version 8

Antwort #1

Der Angular-Compiler verwendet den folgenden regulären Ausdruck, um den Selektor zu analysieren:

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');

Wie Sie sehen können, gibt es keinen Selektor nach ID.

Außerdem werden Ihre Selektoren #root und #child auf root- und child-Elemente angewendet. Wenn Sie also <div id='child'></div> durch <child></child> ersetzen, wird die Kindkomponente gerendert.

Warum funktioniert der Wurzel-Selektor?

Das liegt daran, dass die Root-Komponente speziell behandelt und als dynamische Komponente mit dem folgenden Code gestartet wird:

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

Wo Angular unter der Haube document.querySelector(selectorOrNode) verwendet, um ein bestimmtes Element zu finden, wenn wir einen String angegeben haben.

Andererseits werden alle verschachtelten Komponenten nur gerendert, wenn ihre Selektoren mit Elementen im Template übereinstimmen.