2017-04-12 1 views
2

바인딩 클래스를 입력 매개 변수로 사용하는 컨트롤러 클래스가있는 구성 요소가 있습니다. 생성자가 실행 된 후 컨트롤러의 param에 액세스 할 수 있습니다. 하지만 생성자 매개 변수로 전달할 수 없습니다.컨트롤러 클래스를 사용하여 바인딩 해결

만들기 plunker $ onInit 메서드를 사용하여 가능한 해결책을 발견했습니다. (ui-router doc).

그러나 이것은 올바른 방법입니까? 희망이 누군가에게 도움이되고 개선 될 수 있는지 말해주십시오.

class Controller { 
    constructor(){ 
    'ngInject'; 
    this.$onInit = function(){  // Comment this 
     this.problemScopeHere = angular.copy(this.param); 
    }        // Comment this 
    console.log(this.param);    
    } 
    get(){ 
    this.problemScopeHere = this.param; 
    } 
} 

그리고 여기 당신은 당신의 컨트롤러 클래스에 속성으로 PARAM을 추가해야합니다 구성 요소

let Component = { 
    bindings : { 
     param : "=" 
    }, 
    controller : Controller, 
    controllerAs: '$ctrl', 
    templateUrl: 'component.html' 
}; 

let app = angular.module('app', ['ui.router']); 
app.component('comp', Component); 

답변

0

나는 당신이 routing to component를 사용할 수있는 UI 라우터에 버전과 원인, resolve를 사용한다고 생각합니다 , 나는 데모 목적으로 만 생각합니다) : https://plnkr.co/edit/jaXQN7YmmkI8AC1DxohI?p=preview. 또한 처음에는 $onChanges (첫 번째 실행은 $onInit) 또는 $onInit이 실행되기 전에 바인딩을 사용할 수 없으므로 contructor에 의존하지 않는 것이 좋습니다. $onInit에 의존 할 수 있으며 해결 방법은 가장 현대적인 방법이라고 생각합니다. 예를 들어 template과 같은 매개 변수를 전달하는 데 익숙하지만 UI 라우터 1.x에서는 더 쉽습니다. 정규 클래스 메서드로 $onInit을 선언 할 수 있습니다. 또한 controllerAs: $ctrl을 사용할 필요가 없습니다. $ctrl을 제공하지 않으면 기본값으로 사용됩니다. 모든 구성 요소의 일관성을 위해 항상 기본값을 사용하는 것이 좋습니다.

0

:

는 컨트롤러입니다. 내가 home.html를 모르는 원인이 정말 필요하다

.state('app.home' ,{ 
     url: '/home', 
     component: 'comp', 
     bindigns: { 
     param: 'param', 
     }, 
     resolve: { 
     param: function() { 
      return { 
      string: 'I am the object param' 
      } 
     } 
     } 
    }); 

근무 바이올린 (당신과 다른 조금 :

관련 문제