Question

我使用Angular v2.0.0展开了一个Web应用程序。由于我的应用程序中有子导航，因此我想将一些数据传递到子页面，该子页面通过<router-outlet>加载自己的组件。

正如我在Angular2文档中看到的那样，如果我在主要组件模板中包含子页面指令，我可以达到此目的，但这不是我需要的。

我想使用以下代码：

app.routes.ts

export const routes: RouterConfig = [
    { path: '/', redirectTo: '/one' },
    { path: '/one', as: 'One', component: OneComponent },
    { path: '/two', as: 'Two', component: TwoComponent },
    { path: '/three', as: 'Three', component: ThreeComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

main.component.ts

@Component({
    moduleId: module.id,
    selector: 'main',
    templateUrl: 'main.component.html'
})

export class MainComponent {
    maindata: Object = {name:'jim'};
}

main.component.html

<h1>Home</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>

one.component.ts

@Component({
    moduleId: module.id,
    selector: 'one',
    inputs: ['data'],
    templateUrl: 'one.html'
})

export class OneComponent {
    @Input() data;
}

one.component.html

<h2>{{ data.name }}</h2>
...

怎么做？

Answer 1

您可以使用解析器通过路径将数据直接传递到组件中。第一步是注册解析器：

protected ArrayList<Integer> selectedStatusId = new ArrayList<>();

然后在路线中使用它：

mStatuses

最后要做的是在组件中使用它：

        final ArrayList<String> statusesTitles = new ArrayList<>();
        for (int i = 0; i < mStatuses.size(); i++) {
            statusesTitles.add(mStatuses.get(i).StatusTitle);
        }
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        builder.setTitle(R.string.order_dialog_status_title)
                .setMultiChoiceItems(statusesTitles.toArray(new String[statusesTitles.size()]), null, new DialogInterface.OnMultiChoiceClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i, boolean b) {
                        if (b){
                            selectedStatusId.add(mStatuses.get(i).StatusId);
                        } else {
                            // TODO How I can delete my position from array?
                        }
                    }
                })
                .setPositiveButton(R.string.order_dialog_status_positive_button, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        refreshContent();
                    }
                })
                .setNegativeButton(R.string.order_dialog_status_negative_button, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        dialogInterface.cancel();
                    }
                });
        builder.show();

有关详情

，请参阅此ThoughtRam帖子

Answer 2

您可以传递参数，例如＆＃39; user＆＃39;链接将被写为＆＃39; user /：id＆＃39;你以后可以接受这个论点。此外，您可以使用@Input（）和@Output（）注释

Angular2如何通过路由器

2 个答案: