gpt4 book ai didi

angularjs - Angular 新路由器 - 嵌套组件和路由

转载 作者:行者123 更新时间:2023-12-03 20:59:36 25 4
gpt4 key购买 nike

我正在尝试使用新的 angular 路由器,并想尝试一个用例,其中我有一个组件和一个嵌套组件。

下面是我编写的用于定义两个组件和路由的 JavaScript 代码:

angular.module('app', ['ngNewRouter'])
.controller('AppController', function ($router) {

$router.config([
{
path: '/parent',
component: 'parent'
}
]);

})
.controller('ParentController', function ($router) {

this.name = 'Parent component';
$router.config([
{
path: '/child',
component: 'child'
}
]);

})
.controller('ChildController', function () {

this.name = 'Child component';

})
.config(function ($componentLoaderProvider) {

$componentLoaderProvider.setTemplateMapping(function (compName) {
return compName + '.html';
});

});

和 HTML 部分:
<!-- index.html -->
<body ng-controller="AppController as app">
<a ng-link="parent">Go to parent</a>
<div ng-viewport></div>
</body>

<!-- parent.html -->
{{ parent.name }}<br/>
<a ng-link="child">Show child</a>
<div ng-viewport></div>

<!-- child.html -->
{{ child.name }}

这是一个包含上述代码的Plunker: http://plnkr.co/edit/yWCFgXQI491EYvIldjyR

基于此代码,我有以下问题/问题:
  • 如果我转到最低级别(#/parent/child)然后点击刷新,则不再显示父组件和子组件。即使 URL 仍然相同,路由也不会恢复。我是否需要重新导航或执行某些操作来恢复页面状态?这是能够为 URL 添加书签的一项非常基本的功能。
  • 如果我转到最低级别 (#/parent/child),然后单击转到父链接,则 URL 正确设置为 #/parent 但子组件仍然可见。
  • 最佳答案

    这是旧方式#

     var app = angular.module("app", ["ngRoute"]);
    app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
    templateUrl : "parent.htm"
    })
    .when("/other", {
    templateUrl : "Default.htm"
    });
    });

    关于angularjs - Angular 新路由器 - 嵌套组件和路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30349354/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com