相关疑难解决方法(0)

等待Angular 2在渲染视图/模板之前加载/解析模型

在Angular 1.x中,UI-Router是我的主要工具.通过返回"解析"值的承诺,路由器将在呈现指令之前等待承诺完成.

或者,在Angular 1.x中,null对象不会使模板崩溃 - 所以如果我不介意暂时不完整的渲染,我可以$digestpromise.then()填充最初为空的模型对象后使用它进行渲染.

在这两种方法中,如果可能的话,我宁愿等待加载视图,如果无法加载资源,则取消路由导航.这为我节省了"取消导航"的工作.编辑:注意这具体意味着这个问题要求Angular 2期货兼容或最佳实践方法来执行此操作,并要求尽可能避免使用"Elvis操作符"!因此,我没有选择那个答案.

但是,这两种方法都不适用于Angular 2.0.当然,有一个标准的解决方案计划或可用于此.有谁知道它是什么?

@Component() {
    template: '{{cats.captchans.funniest}}'
}
export class CatsComponent {

    public cats: CatsModel;

    ngOnInit () {
        this._http.get('/api/v1/cats').subscribe(response => cats = response.json());
    }
}
Run Code Online (Sandbox Code Playgroud)

以下问题可能反映了相同的问题:加载数据PROMISE后的Angular 2渲染模板.请注意,问题中没有代码或接受的答案.

promise observable dependency-resolver angular

70
推荐指数
3
解决办法
10万
查看次数

使用带有<router-outlet>的@Inputs的Angular2

我的页面中有一个子导航,在公共主视图下方显示一些子视图.我想通过一个对象传递给子视图,<router-outlet>这样我就可以在主组件中检索一次数据,然后与子组件共享它.

注意:如果我<one></one>main.html中包含该指令,它可以工作,但这不是我想要的行为.

主要观点:

<h1>Details</h1>   
<a [router-link]="['./sub1']">One</a> | 
<a [router-link]="['./sub2']">Two</a> | 
<a [router-link]="['./sub3']">Three</a>   
<hr/>  
<router-outlet [data]="maindata"></router-outlet>
Run Code Online (Sandbox Code Playgroud)

子视图1:

<h2>{{ data.name }}</h2>
...
Run Code Online (Sandbox Code Playgroud)

主要观点:

@Component({
    selector: 'main-detail',
    directives: [ROUTER_DIRECTIVES],
    templateUrl: './main.html'
})
@RouteConfig([
    { path: '/', redirectTo: '/one' },
    { path: '/one', as: 'One', component: OneComponent },
    { path: '/two', as: 'Two', component: TwoComponent },
    { path: '/three', as: 'Three', component: ThreeComponent }
])
export class MainComponent {
    maindata: Object = {name:'jim'};
}
Run Code Online (Sandbox Code Playgroud)

子视图1:

@Component({
    selector: 'one', …
Run Code Online (Sandbox Code Playgroud)

typescript angular2-template angular

43
推荐指数
2
解决办法
4万
查看次数

在Angular2路由中使用Resolve

在Angular 1中,我的配置如下所示:

$routeProvider
  .when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        message: function(messageService){
            return messageService.getMessage();
    }
  }
})
Run Code Online (Sandbox Code Playgroud)

如何在Angular2中使用resolve?

angular2-routing angular

32
推荐指数
5
解决办法
3万
查看次数

如何将数据注入从路由器创建的Angular2组件?

我正在尝试构建一个Angular2原型(基于alpha44)我们的Angular1应用程序(相当复杂的一个),我正在尝试在使用路由和子路由时找到最佳的模型/数据架构.

在我的示例中,从路由创建的子组件,我想访问父组件的属性(托管router-outlet).

但是当你从创建一个组件router-outlet,你不能使用@Input@Output了.那么注入一些数据/属性的最佳实践是什么,除了基本routeParams和静态routeData

如何在没有太多耦合的情况下与父组件通信?

router components angular

6
推荐指数
1
解决办法
1万
查看次数