Angular 如何从html向组件传递值？

我想将一个静态值从html传递到组件，但它不起作用，我整天都被卡住了。。。你能给我一些胶水吗？谢谢

组成部分：

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

@Component({
  selector: 'rio-hello',
  template: `<p>Hello, {{name}}!</p>
    <button (click)="greet()">Show Greet</button>
  `,
})
export class HelloComponent {
  @Input()
  name: string;

  greet(){
    console.log(`Hello,${name}`);
  }
}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“里约你好”，
模板：`Hello，{{name}}

打招呼
`,
})
导出类HelloComponent{
@输入（）
名称：字符串；
问候{
log（`Hello，${name}`）；
}
}

条目html index.html

<rio-hello name="World"></rio-hello>

---

我所期望的是它可以在页面上打印Hello，World，并且可以在组件中将name属性设置为World，如何创建它？

您需要添加

此
来引用
name
，因为它是
HelloComponent
实例的一部分：

greet() {
  console.log(`Hello, ${this.name}`);
}

你的模板看起来不错

编辑：由于您正在引导组件中使用
@Input
，因此似乎不可能这样做：




即使添加此关键字，它也不起作用。控制台显示Hello，未定义，页面显示Hello，！，世界不是由组件获得的。你能将
添加到你的app.component.html而不是index.html（其中
应该在index.html中）吗？是的，如果我将app组件作为引导组件并在app.component.html中使用rio hello，这应该是可行的，但这不是我的确切期望，我希望给用户一个直接在第一个位置设置名称值的机会，index.html，而不是父组件。我创建了一个实时的angular项目，每个人都可以在线编辑和运行它，也许你可以看看。感谢您的回答。是否可以获取一个看起来非常有用的bootsrapped组件的属性？假设应用程序组件需要解析一个在属性上配置了名称和路径的文件。如果没有直接获取路径的能力，我们就无法解析它。似乎@input仅适用于父组件和子组件之间的数据传递