애플리케이션 전체에서 재사용 할 수있는 재사용 가능한 구성 요소를 만들려고합니다. Angular 1.5.8을 사용하고 있습니다.
부모 구성 요소에서 자식 구성 요소로 전달해야하는 데이터가 있습니다. (일반적으로 정보를 보유한 객체). 그것은 될 수 있습니다
몇 가지 읽은 후 부모 구성 요소의 이름을 언급 한 다음 부모 컨트롤러의 메서드에 액세스 할 수있는 require라는 속성이 있음을 알았습니다.
가장 큰 단점은 상위 구성 요소 이름이 하드 코딩된다는 것입니다. 그리고 이는 구성 요소의 재사용 가능성을 제한합니다.
어쨌든 부모 구성 요소에서 자식으로 데이터를 동적으로 전달할 수있는 곳이 있습니까?
코드 샘플
app.component('parent',
{ restrict: 'E',
scope: {},
templateUrl: 'app/parent.html',
controller: function(){
var vm = this;
vm.sayHello = function (){
return {
parentName : 'parent1',
parentCode : 'parentCode1'
};
};
},
controllerAs: 'vm'});
app.component('child', {
require: {
parentCtrl: '^^parent'
},
controller: function() {
var self = this;
this.$onInit = function() {
self.parentCtrl.sayHello();
};
}
});
감사
정의 개체의 자식 구성 요소에 바인딩을 추가합니다.
app.component('child',{
bindings:{
data: '<'
},
templateUrl: 'app/child.html',
controller: childController});
그런 다음 parent.html에서 다음을 사용합니다.
여기 Plunkr : https://plnkr.co/edit/d6wS1dHVsYT3fNkMUVNY?p=preview
angular.noop는 빈 함수이므로 구성 요소에 대한 컨트롤러가없는 경우 넣을 수 있습니다. controllerAs 별칭 이름을 지정하지 않으면 $ ctrl이 기본값입니다.
또한 하위 구성 요소 $ onInit () $ onChanges () 및 $ onDestroy () 수명주기 후크를 사용하여 구성 요소가 특정 지점에서 수행 할 작업을 제어 할 수 있습니다.
.component를 사용하는 경우 제한을 삭제하십시오. 'E'는 이미 요소입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다