Question

我是angular的新手，目前我已经看了angular.io网站给出的一些示例。但是在文档中的component decorator解释中，声明为

角度组件是指令的子集，始终与模板。与其他指令不同，只能将一个组件按模板中的每个元素实例化。。

它们的实际含义是模板中每个元素只能实例化一个组件。

任何人都可以请我解释一下。

Answer 1

模板中的每个元素只能实例化一个组件。

import { useState, useEffect } from 'react' export const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = useState(value) useEffect( () => { const handler = setTimeout(() => { setDebouncedValue(value) }, delay) return () => { clearTimeout(handler) } }, [value, delay] ) return debouncedValue }可以实例化为DOM中的元素（AppComponent）

There are many ways to reuse it(module, routing...)

online example

Answer 2

这实际上意味着在角度生态系统中，模板中每个元素（选择器）仅实例化一个组件。检查以下示例。

//app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div style="text-align:center">
          Welcome to {{ title }}!
    </div> `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test App';
}

尝试在index.html中使用两个选择器标记

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
  <base href="/">    
</head>
<body>
  <app-root></app-root>
  <app-root></app-root>
</body>
</html>

结果，您将只会看到一个 Welcome to the Test App 在浏览器中呈现的。每个html元素只能有一个组件

有关Angular组件装饰器行为的歧义，如Angular文档中所述

2 个答案: