Question

目前我想通过选择器绑定我的数据但是当我使用选择器标签时什么都没有：

基本上我想通过将消息从其他组件传递给该组件来重用我的通知程序组件：

notifier.component

    import {Component,Output, EventEmitter} from "@angular/core";

@Component({
    selector: 'app-notifier',
    template: `
   <div class="notice notice-success">
        <strong>{{message}}</strong> 
    </div>
    <ng-content></ng-content>
      `,
    styleUrls: ['./notifier.component.css']
})

export class NotifierComponent {
    @Input() message:any;
}

我使用seletor发送数据但没有得到正确的值：

Sendata.component

<class="main">
  <app-notifier [message]="Data i want to send is this string"></app-notifier>
</class>

Answer 1

由于您要发送字符串，因此您还需要使用单引号，因为现在您尝试发送名为变量的

Data i want to send is this string

因此，要发送该特定字符串，请改用：

  <app-notifier [message]="'Data i want to send is this string'"></app-notifier>

Answer 2

使用Input

export class NotifierComponent {
    @Input() message: any;
}

<强> Sendata.Component

<class="main">
  <app-notifier [message]="Mymessage"></app-notifier>
</class>

使用[]代替()进行绑定。对于直接字符串值，请使用单引号表示字符串文字。

<class="main">
  <app-notifier [message]="'Mymessage'"></app-notifier>
</class>

Answer 3

Why can't you use @viewchild Concept

<强> CHILD.COMPONENT.TS

   @Component({
      selector: 'user-profile'
    })

    export class UserProfile {
      constructor() {}
      sendData() {
        //send data
      }
    }

<强> PARENT.COMPONENT.TS

import { Component, ViewChild } from '@angular/core';
import { UserProfile } from '../user-profile';

@Component({
  template: '<user-profile (click)="update()"></user-profile>',
})
export class MasterPage {
  // ViewChild takes a class type or a reference name string.
  // Here we are using the type
  @ViewChild(UserProfile) userProfile: UserProfile

  constructor() { }

    update(){
    this.userProfile.sendData();
  }
}

Angular 2 @Input标记在使用选择器时未收到值

3 个答案: