how to access super component class variable into sub component Class?

Question

How i access super component class variable into sub component in Angular2?

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

  }
}

super Component 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>

sub component 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() {

  }
}

sub Component amcard.html

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

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

advanced Thanks for helping me.

Answer 1

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