Question

我正在尝试在WebStorm中实施@Input-Dekorator。

实际上它很简单，但我的IDE不建议使用@Input-variable。

代码：

“AppComponent”向“UserComponent”发送一些值

import {Component} from "@angular/core";
import {UserComponent} from "./user/user.component";

@Component({
    selector: 'app',
    templateUrl: './app/app.component.html'
})

export class AppComponent {

    public master_chef:string = "MASTER CHEF";
    constructor () {
        console.log ("App Component");
    }

}

和app.component.html

<nav>NAVIGATION</nav>
<main>
    <h1>MAIN</h1>
    <user_component> 
       <!--user_component will be recognized, cause i can create user-
         templates, which i see.-->
<!--Usually WebStorm suggest me @Input-Parameter "master_name" and parent-variable "master_chef", but now i can not retrieve these.-->
       [master_name]='master_chef';
    </user_component>
</main>

UserComponent看起来像这样：

@Component({
    selector: 'user_component',
    template: `<h3>HELLO FROM USER</h3>`
})

export class UserComponent {

    @Input()
    master_name:string; //this variable will not be suggested above by AppComponent
    constructor () {
        console.log ("User Component");
    }
}

我只能看到<h3>HELLO FROM USER</h3>中的UserComponent。这有什么不对？

更新

app.component.html如下所示：

<nav>NAVIGATION</nav>
<main>
    <h1>MAIN</h1>
    <user_component>
       [master_name]="master_chef";
    </user_component>
</main>

通常，WebStorm建议我输入user_component的字段master_name。但现在不会被承认或建议。 <{1}}中的master_chef字段将无法识别或建议。

这里有什么问题？

更新2

我已将组件中的选择器名称从user_component更改为user。以这种方式从Datasource到View-Target的单向工作在app.component.html中：我可以从detail_message-variable看到值，但[mastername]不起作用：（

app_component

Answer 1

Webstorm正确建议，但您应该在标记标题中放置绑定，而不是在标记正文中。此外，它不是一个打字稿声明，您最后不需要编写;。在模板中，您只能使用表达式。

<nav>NAVIGATION</nav>

<main>
    <h1>MAIN</h1>
    <user_component
       <!--user_component will be recognized, cause i can create user-
         templates, which i see.-->
<!--Usually WebStorm suggest me @Input-Parameter "master_name" and parent-variable "master_chef", but now i can not retrieve these.-->
       [master_name]='master_chef'>
    </user_component>
</main>

角度输入将无法识别

1 个答案: