如何访问超组件类变量为子组件类

问题描述

我如何访问超组件类变量为子组件在Angular2

how i access super component class variable into sub component in Angular2

超分量的 Article.ts

@Component({
  selector: 'article'
})

@View({
  templateUrl: './components/article/article.html?v=<%= VERSION %>',
  styleUrls : ['./components/article/article.css'],
  directives: [CORE_DIRECTIVES, AmCard, NgFor]
})

export class Article{

  articleArr : Array;
  constructor() {
    this.articleArr = new Array();
  }

  articleSubmit(articleSubject, articleName, articleUrl)
  {
    this.articleArr.push({title: articleSubject.value, user : articleName.value, url : articleUrl.value});

  }
}

超分量的 article.html

＆LT; D​​IV * NG换=articleArr的＃项目＆GT;
    ＆LT; AM-卡卡标题={{item.title}}牌连杆={{item.url}}牌笔者={{item.user}}＆GT;＆LT; / AM -card＆GT;
＆LT; / DIV＆GT;

子组件的 amcard.ts

@Component({
  selector: 'am-card',
  properties : ['cardTitle', 'cardLink', 'cardAuthor']
})

@View({
  templateUrl: './components/card/card.html?v=<%= VERSION %>',
  styleUrls : ['./components/card/card.css'],
  directives: [CORE_DIRECTIVES]
})

export class AmCard {
  constructor() {

  }
}

子组件的 amcard.html

＆LT; D​​IV CLASS =一卡通＆GT;
  ...
＆LT; / DIV＆GT;

所以我的问题是如何访问文章类的 articleArr在 AmCard类

so my question is how to access articleArr of Article Class in AmCard class

先进
   感谢您帮助我。

advanced Thanks for helping me.

推荐答案

您可以注入一个父组件到使用angular2依赖注入一个孩子。使用 @Inject 参数装饰和 forwardRef 做到这一点（ forwardRef 让我们可以参考文章这是尚未确定）。所以，你的 AmCard 部分看起来像（见的）：

You can inject a parent component into a child using angular2 Dependency Injection. Use @Inject parameter decorator and forwardRef to do it (forwardRef allows us to refer to Article which wasn't yet defined). So your AmCard component will look like (see this plunker):

@Component({
  selector: 'am-card',
  template: `
    <span>{{ articleLength }} - {{ cardTitle }}<span>
  `
})
export class AmCard {
  @Input() cardTitle: string;
  @Input() cardLink: string;
  @Input() cardAuthor: string;

  constructor(@Inject(forwardRef(() => Article)) article: Article) {
    // here you have the parent element - `article`
    // you can do whatever you want with it
    this.articleLength = article.articleArr.length;
    setTimeout(() => {
      article.articleSubmit({ value: Math.random() }, {}, {});
    }, 1000)
  }
}

但是，恕我直言，这是一个坏的模式。如果可能的话，这是最好使用传递消息给父组件，并在父组件处理该消息。在你的情况下，它看起来像（请参见）：

But, IMHO, it's a bad pattern. If possible, it's much better to use output property (event binding) to pass message to a parent component and in a parent component handle that message. In your case it would look like (see this plunker):

@Component({ /* ... component config */})
class AmCard {
  // ... input properties
  @Output() callSubmit = new EventEmitter();

  constructor() {
    setTimeout(() => {
      // send message to a parent component (Article)
      this.callSubmit.next({ value: Math.random() });
    }, 1000)
  }
}

@Component({
  // ... component config
  template: `
    <h3>Article array:</h3>
    <div *ng-for="#item of articleArr">
      <am-card
        [card-title]="item.title"
        [card-link]="item.url"
        [card-author]="item.user"
        `/* handle message from AmCard component */+`
        (call-submit)=" articleSubmit($event, {}, {}) "
      ></am-card>
    </div>
  `
})
class Article{
  // ... properties and constructor

  articleSubmit(aa, an, au) {
    this.articleArr.push({ title: as.value, user: an.value, url: au.value });
  }
}

这篇关于如何访问超组件类变量为子组件类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！