學習怎樣使用@Input，不過出現了error。

General
1

當我用@Input，它出現這個error:
Error in src/app/app.component.html:3:1 error NG8001: ‘hello-component’ is not a know element:

  1. If ‘hello-component’ is Angular component, then verify that it is part of this module.
  2. If ‘hello-component’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
    3<hello-component [myName]=“123”>
    src/app/app.component.ts:6:16
    6 templateUrl: ‘./app.component.html’,
2

以下是我的CODE
app.component.html

app.components output name: {{this.name}}

app.component.ts
import { Component, Input } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.scss’]
})
export class AppComponent {
title = ‘my-app’;
name:string;

constructor ()
{
this.name = “Hello, world!”;
}
}

hello.component.ts
import { Component, Input } from ‘@angular/core’;

@Component({
selector: ‘hello-component’,
template: ‘

{{myName}}

’,
inputs: [‘myName’]
})

export default class HelloComponent
{
myName: string;

constructor()
{}

}

3

分幾塊問題

這個錯誤為：
選擇器問題
你的hello.component.ts
中的
selector: ‘hello-component’,
請改為
helloComponent

在app.component.html中
引用改為

<helloComponent ></helloComponent>

然後可以課外學習看看選擇器吃什麼格式的東西
或是請高手補充

@input寫法你也沒有寫完
我直接範例給你
也特地做了特殊化讓命名不會搞混

範例

再請其他高手補充或是指正

4

我按照你的方法去更改，都是有ERRO出現，它的ERROR 如下:
ERROR in src/app/app.component.html:3:1 - error NG8001: ‘helloComponent’ is not a known element:

  1. if ‘helloComponent’ is an Angular component, then verify that it is part of this module.
  2. To allow any element add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.
    3 <helloComponent [myName]=“123”>
    src/app/app.component.ts:5:16

是否需要在app.module.ts 加入這些:
import { HelloComponent } from ‘./hello.component’;
import { FormsModule } from ‘@angular/forms’;
declarations: [ AppComponent, HelloComponent ],

thank you very much.

5

是
沒錯

第三點可能是input 有問題吧
錯誤中顯示 [myName]=“123”
看看對照我的範例寫法是否能解決

6

已經成功了。
THANK YOU VERY MUCH.

我應該是我的hello.component.ts 裏selector: ‘helloComponent’ 和export class helloComponent名稱應該要相同，而且要在app.module.ts 加入
import { helloComponent } from ‘./hello.component’;
import { FormsModule } from ‘@angular/forms’;
declarations: [ AppComponent, HelloComponent ]

很多教學網頁都沒有提給這些。

7

這個不一定要一樣…
我範例中提供了好幾個範例的命名
但是export class 那邊我都沒改喔 :joy: :joy: :joy:

但是export class 的名稱要和app.module.ts中的declarations:[]裡面名稱相同

未來用到像是angular material UI 彈出視窗像是dialog 還要額外加到 imports: [] 裡面去

有幾個可能

可以嘗試看一下這個

https://angular.io/cli

用angular cli 這關鍵字去看一下教學

以及改用比較智慧一點的IDE
如果是用vs code 就安裝相關套件
像是Angular Extension Pack 保哥整理的那個插件安裝一下

這樣的話這類error會減少很多
因為都會提示或是自動補正