@Input 在角度 2 组件中不起作用 [重复]

Question

EJS 变量到 Angular2 组件

我正在尝试将模型数据对象（它是来自 ejs 模板的 JSON 对象）传递给 angular2 组件。这是我的组件代码，它有一个名为 test 的输入。我已经列出了我试图使它起作用的选项。

import {Component, OnInit, Input } from "@angular/core";
import { Router } from "@angular/router";
import {Location} from '@angular/common';

declare var $:JQueryStatic;


@Component({
    selector: "app-loader",
    templateUrl: "views/app-index.html"
})

export class AppComponent {
  public viewType;

  @Input() test: string;

  constructor(private router: Router, private location: Location) {
    // console.log(this.providers);
    switch (location.path()) {
      case '/login':
        this.viewType = "login";
        break;
      default:
        this.viewType = "/";
        break;
    }
  }

  ngOnInit() {
    console.log(this.test);
    $("app-loader").addClass("md");
  }
}

传递ejs模板数据如下：

选项 1：

<app-loader [test]="'<%= JSON.stringify(providers) %>'">Loading...</app-loader>

选项 2：

<app-loader [test]="providers">Loading...</app-loader>

Answer 1

如果您想检索此输入数据，请尝试

<app-loader test="yourdata as string">Loading...</app-loader>

在应用中

 constructor(private elementRef: ElementRef,) {
  var native = this.elementRef.nativeElement;
  var shadow = native.getAttribute("test");
      }