如何将超级组件类变量访问到子组件类中? [英] how to access super component class variable into sub component Class?

问题描述

我如何在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

<div *ng-for="#item of articleArr"> <am-card card-title="{{item.title}}" card-link="{{item.url}}" card-author="{{item.user}}"></am-card> </div>

<div *ng-for="#item of articleArr"> <am-card card-title="{{item.title}}" card-link="{{item.url}}" card-author="{{item.user}}"></am-card> </div>

子组件 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

<div class="card"> ... </div>

<div class="card"> ... </div>

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

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

高级 感谢您的帮助.

advanced Thanks for helping me.

推荐答案

您可以使用angular2依赖注入将父组件注入子组件.使用 参数修饰符和此导航键):

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 });
  }
}

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