ngRoute를 사용하여 변수를 구성 요소로 전달

Question

angularJS 1.5 구성 요소에 대한 좋은 정보를 읽은 후 사용하려고합니다. "Hello world!"라는 간단한 테스트를했습니다. "세계"가 바인딩 인 구성 요소. ngRoute를 사용하여 해당 데이터를 구성 요소로 전달하고 싶지만이를 수행하지 못했습니다. 검색했지만 해결책을 찾지 못했습니다.

여기에 코드입니다 :

var app = angular.module('app', [ 
    'ngRoute' 
]); 

app.config(function($routeProvider) { 
    $routeProvider.when('/', { 
     template: '<component1></component1>', 
     resolve: { 
      name: 'world' 
     } 
    }); 
}); 

app.component('component1',{ 
    template: '<h1>Hello {{$ctrl.name}}!', 
    bindings: { 
     name: "@" 
    } 
}); 

내가 "<"와 "="성공없이 같은 다른 바인딩했습니다. 여기

app.config(function($routeProvider) { 
    $routeProvider.when('/', { 
     template: '<component1 name="world"></component1>' 
    }); 
}); 

내가 가지고있는 문제를 재현 plunker입니다 : 또한이 같은 템플릿에 변수를 전달하면 작동되는 점에 유의하시기 바랍니다 https://plnkr.co/edit/Aq9wbUi6rZe4hFoFOa31?p=preview 당신의 도움은 매우 극명하게 될 것이다

)

당신이 the documentation을 읽으면

건배, Jerebenz

Answer 1

, 당신은 이해해야 그

• 해결 된 개체의 값은 함수로 가정됩니다.
• 해결 된 값은 구성 요소에 직접 바인딩되지 않습니다. 템플릿 범위의 $resolve 변수에서 사용할 수 있습니다.

그래서 코드는

var app = angular.module('app', [ 
    'ngRoute' 
]); 

app.config(function($routeProvider) { 
    $routeProvider.when('/', { 
     template: '<component1 name="{{ $resolve.name }}"></component1>', 
     resolve: { 
      name: function() { return 'world'; } 
     } 
    }); 
}); 

app.component('component1',{ 
    template: '<h1>Hello {{$ctrl.name}}!', 
    bindings: { 
     name: "@" 
    } 
}); 

이 데모 https://plnkr.co/edit/rMx2SymR6GXT51Souxgt?p=preview를 참조해야한다.