属性をラッパーコンポーネントからネストされたコンポーネントに透過的に変換するにはどうすればよいですか?
あることを考えると
const FIRST_PARTY_OWN_INPUTS = [...];
const FIRST_PARTY_PASSTHROUGH_INPUTS = ['all', 'attrs', 'are', 'passed'];
@Component({
selector: 'first-party',
inputs: [...FIRST_PARTY_OWN_INPUTS, ...FIRST_PARTY_PASSTHROUGH_INPUTS],
template: `
<div>
<third-party [all]="all" [attrs]="attrs" [are]="are" [passed]="passed"></third-party>
<first-party-extra></first-party-extra>
</div>
`,
directives: [ThirdParty]
})
export class FirstParty { ... }
入力をバッチで変換できるので、テンプレートに列挙されませんか?
上記のコードは、Angular 1.xディレクティブのレシピを再作成することになっています:
app.directive('firstParty', function (thirdPartyDirective) {
const OWN_ATTRS = [...];
const PASSTHROUGH_ATTRS = Object.keys(thirdPartyDirective[0].scope);
return {
scope: ...,
template: `
<div>
<third-party></third-party>
<first-party-extra></first-party-extra>
</div>
`,
compile: function (element, attrs) {
const nestedElement = element.find('third-party');
for (let [normalizedAttr, attr] of Object.entries(attrs.$attr)) {
if (PASSTHROUGH_ATTRS.includes(normalizedAttr)) {
nestedElement.attr(attr, normalizedAttr);
}
}
},
...
};
});
正しく理解できたかどうかはわかりませんが、これが私の実装です( [〜#〜]プランカー[〜#〜] )
const FIRST_PARTY_OWN_INPUTS = ['not', 'passthrough'];
const FIRST_PARTY_PASSTHROUGH_INPUTS = ['all', 'attrs', 'are', 'passed'];
const generateAttributes(arr) {
return arr.map(att => '[' + att + '] = "' + att + '"').join(' ');
}
//-------------------------------------------------------//////////////////
import {Component} from '@angular/core'
@Component({
selector: 'third-party',
inputs: [...FIRST_PARTY_PASSTHROUGH_INPUTS],
template: `
<div>
{{all}} , {{attrs}} , {{are}} , {{passed}}
</div>
`
})
export class ThirdParty {
}
@Component({
selector: 'first-party',
inputs: [...FIRST_PARTY_OWN_INPUTS, ...FIRST_PARTY_PASSTHROUGH_INPUTS],
template: `
<div>
<div>
{{not}} , {{passthrough}}
</div>
<third-party ${generateAttributes(FIRST_PARTY_PASSTHROUGH_INPUTS)}></third-party>
<first-party-extra></first-party-extra>
</div>
`,
directives: [ThirdParty]
})
export class FirstParty {
}
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h2>Hello {{name}}</h2>
<first-party [not]="'not'" [passthrough]="'passthrough'"
[all]="'all'" [attrs]="'attrs'" [are]="'are'" [passed]="'passed'">
</first-party>
</div>
`,
directives: [FirstParty]
})
export class App {
constructor() {
this.name = 'Angular2 (Release Candidate!)'
}
}
それが役に立てば幸い :)
これは、Angular2がまったくなくても、より基本的な問題に要約できると思います。多くのパラメーターを受け取る関数がある場合、それを使用するたびにそれらすべてのパラメーターを指定しなければならないのは面倒でエラーが発生しやすいです。これらのパラメーターをまったく気にしない中間関数があると、問題はさらに悪化します。中間関数にパラメーターを追加して、内部関数に渡すことができるようにするだけです。イヤーグ!
これに対処するためのいくつかのパターンがあります。私のお気に入りは、内部関数を完全にインスタンス化し、以前のパススルーパラメーターが埋め込まれたインスタンスを既にロードした状態で渡すことです。 http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/ は、Angular 2 @ViewChild
と@ContentChild
を使用します。別の戦略は、すべてのパススルーパラメーターを単一のオブジェクトにラップすることです。したがって、パススルーするパラメーターは少なくとも1つだけです。パラメータを追加する場合に役立ちます。パラメータはすでにラップされて不透明に渡されているため、パススルーコードを変更する必要はありません。
これは、子コンポーネントで@Input()を使用することで実現できます。
http://plnkr.co/edit/9iyEsnyEPZ4hBmf2E0ri?p=preview
親コンポーネント:
import {Component} from '@angular/core';
import {ChildComponent} from './child.component';
@Component({
selector: 'my-parent',
directives: [ChildComponent],
template: `
<div>
<h2>I am the parent.</h2>
My name is {{firstName}} {{lastName}}.
<my-child firstName="{{firstName}}"
lastName="{{lastName}}">
</my-child>
</div>
`
})
export class ParentComponent {
public firstName:string;
public lastName: string;
constructor() {
this.firstName = 'Bob';
this.lastName = 'Smith';
}
}
子コンポーネント:
import {Component, Input} from '@angular/core';
@Component({
selector: 'my-child',
template: `
<div>
<h3>I am the child.</h3>
My name is {{firstName}} {{lastName}} Jr.
<br/>
The name I got from my parent was: {{firstName}} {{lastName}}
</div>
`
})
export class ChildComponent {
@Input() firstName: string;
@Input() lastName: string;
}
アプリコンポーネント:
//our root app component
import {Component} from '@angular/core';
import {ParentComponent} from './parent.component';
@Component({
selector: 'my-app',
directives: [ParentComponent],
template: `
<div>
<my-parent></my-parent>
</div>
`
})
export class App {
constructor() {
}
}