标签: angular-routing
Angular UI Router - 处于继承状态的视图
编辑:基于@ actor2019的回答我想更新我的问题以更好地解释问题:
使用Angular UI-Router(v0.0.2),我设置应用程序以在主要"页面"/状态之间正确导航,同时继承基本状态.
index.html的:
<div ui-view></div>
base.html文件:
<!-- Header -->
<div>
<!-- Header markup -->
<!-- Search View -->
<div ui-view="search"></div>
</div>
<!-- Page Content view -->
<div ui-view></div>
问题出在app.js文件中.当我将views参数添加到base状态时,一切都停止工作(100%空白页).没有该参数,页面呈现正确,但我没有搜索视图.
app.js:
$urlRouterProvider.otherwise('/');
//
// Now set up the states
$stateProvider
.state('base', {
abstract: true,
templateUrl: 'views/base.html',
views: {
"search": {
templateUrl: "views/search.html"
}
}
})
.state('base.home', {
url: "/",
templateUrl: "views/home.html"
})
.state('base.page2', {
url: "/page2",
templateUrl: "views/page2.html"
});
如何向此父级"基础"状态添加视图？
更新: @ …
javascript angularjs angular-ui angular-routing angular-ui-router
推荐指数
解决办法
查看次数
多个命名路由器出口角度2
我希望通过子路径显示不同的视图.例如,我希望我的模板能够容纳多个路由器插座
Version: @angular/router": "3.0.0-alpha.7"
<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>
在我的路由器中,我想指定路由器的名称.
正如我在一个问题中看到的,解决方法是指定AuxRoute,但此版本中不存在AuxRoute.
{path: '/', component: HomeComponent, as: 'Home'},
new AuxRoute({path: '/route1', component: Route1Component, as: 'Route1'}),
new AuxRoute({path: '/route2', component: Route2Component, as: 'Route2'})
虽然在角度2官方网站上我发现它可能有多个路由器,但我找不到任何资源.
https://angular.io/docs/ts/latest/guide/router.html
A template may hold exactly one unnamed <router-outlet>. The router supports multiple named outlets, a feature we'll cover in future.
推荐指数
解决办法
查看次数
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 …推荐指数
解决办法
查看次数
如何使用Angular 2 Dart在页面重新加载时支持RouteParams？
我在Angular 2 Dart中使用Router和RouteParams.
我的路线如下:
@RouteConfig(const [
const Route(path: '/', component: ViewLanding, as: 'home'),
const Route(path: '/landing', component: ViewLanding, as: 'landing'),
const Route(path: '/flights', component: ViewFlights, as: 'flights'),
const Route(path: '/picker/:cityDepart/:cityArrival/:dateDepart/:dateArrival/', component: ViewFlights, as: 'picker'),
const Route(path: '/order/:id/:level/:dateDepart/:dateArrival/', component: ViewOrder, as: 'order'),
const Route(path: '/order/complete', component: ViewComplete, as: 'orderComplete')
])
//应用程序入口点:
void main() {
print('-- Main.dart 2 --');
bootstrap(Tickets, [
routerInjectables,
client_classes,
// The base path of your application
bind(APP_BASE_HREF).toValue('/'),
// uncomment this if you want to use '#' in your …推荐指数
解决办法
查看次数
如何有条件地在锚点上使用[href]或[routerLink]？
我需要在本地或外部资源有条件地指向相同的锚链接.我试过了
<a [href]="outside?externalUrl:null" [routerLink]="outside?[]:['/route',id]" >test</a>
但它不起作用.我没有收到任何错误,但它指向同一本地页面并忽略外部URL.有任何想法吗？
另一个选择是构建链接,但我找不到任何文档如何访问routerLink服务内部
编辑:我知道我可以克隆整个链接,*ngIf但我不想这样做,我的链接包含一个带有大量选项的视频标签
推荐指数
解决办法
查看次数
404找不到nginx角度路由
我有一个Angular应用程序.我运行命令ng build --prod --aot来生成dist文件夹.在dist文件夹中,我创建了一个名为Staticfile的文件,然后使用以下命令将dist文件夹上传到pivotal.io:
- cf push name-app --no-start
- cf start name-app
该应用运行良好.我有一个导航栏,所以当我用导航栏改变路径时一切正常.但是当我手动操作时(我自己输入网址)我有这个错误404 Not Found nginx.这是我的app.component.ts:
const appRoutes: Routes = [
{ path: 'time-picker', component: TimePickerComponent },
{ path: 'material-picker', component: MaterialPickerComponent },
{ path: 'about', component: AboutComponent },
{ path: 'login', component: LoginComponent },
{ path: 'registration', component: RegistrationComponent },
{
path: '',
redirectTo: '/time-picker',
pathMatch: 'full'
}
];
@NgModule({
declarations: [
AppComponent,
TimePickerComponent,
MaterialPickerComponent,
DurationCardComponent,
AboutComponent,
LoginComponent, …nginx cloud-foundry angular-routing pivotal-cloud-foundry angular
推荐指数
解决办法
查看次数
如何将 Router.navigate() 与命名路由器出口和 url 参数一起使用
我在使用命名路由器出口时遇到麻烦，我认为我使用错误，尽管我假设我遵循了角度文档：
路由器配置：
const routes: Routes = [
{path: 'checktypes', component: ChecktypeComponent},
{path: 'checktypes/:id', component: ChecktypeDetailsComponent, outlet: 'checktypeDetails'},
];
模板ChecktypeComponent：
...
<router-outlet name="checktypeDetails"></router-outlet>
...
在ChecktypeComponent（路线上/checktypes）：
this.router.navigate([{outlets: {checktypeDetails: ['checktypes', 1]}}]);
为了简单起见，我对 id 1 进行了硬编码。我总是收到错误Cannot match any routes. URL Segment: 'checktypes/1'。我尝试了很多东西，但我无法让它发挥作用。我究竟做错了什么？
推荐指数
解决办法
查看次数
如何从angularjs ng-route中删除hash#
我试图使用locationProvider从角度js中的url路由中删除主题标签,但它给了我错误.
app.js
var eclassApp = angular.module('eclassApp',
['ngRoute', 'eclassControllers', ]
);
eclassApp.config(['$routeProvider','$locationProvider',
function ($routeProvider, $locationProvider){
$routeProvider.
when('/',{
templateUrl: '/html/student-list.html',
controller: 'StudentsListCtrl',
}).
when('/students/:studentId',{
templateUrl: '/html/student-details.html',
controller: 'StudentDetailsCtrl',
}).otherwise({
redirectTo: '/students'
});
$locationProvider.htmlMode(true);
}]
);
错误:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=eclassApp&p1=TypeE…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.13%2Fangular.min.js%3A17%3A1)
我错过了什么吗？
编辑:用这样的选项对象调用html5Mode函数
$locationProvider.html5Mode({
enabled:true
})
我得到以下错误(更改为角度已满,以获得更好的错误解释而不是缩小版本)
Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!
推荐指数
解决办法
查看次数
如何在Angular 2中使用子路由
Angular 2版本:2.0.0-alpha.44
我一直在尝试在Angular 2中进行路由.虽然我能够完成正常的路由,但是当我介绍子路由时,我遇到了一些问题.以下是plnkr上的示例(http://plnkr.co/edit/Y5doqU1WcEe4Ldr7KfPJ)
以下是快速参考的代码.我正在努力实现以下路由
App
/\
/ \
HomeCmp HelloCmp
\
\
ChildCmp
下面是我如何配置我的路径
import {bootstrap, bind, Component, View} from 'angular2/angular2'
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'
@Component({
selector: 'child-cmp'
})
@View({
template: `
<div>
<h3>Whats up</h3>
</div>
`
})
class ChildCmp { }
// ************************ Hello Component ***********************************
@Component({
selector: 'hello-cmp'
})
@View({
template: `
<div>
<h2>Hello there !</h2>
<router-outlet></router-outlet>
</div>
`,
directives: ROUTER_DIRECTIVES
})
@RouteConfig([
{path: '/', component: ChildCmp, as: 'ChildCmp'}
])
class …推荐指数
解决办法
查看次数
如何在新的Router Angular 2中生成url路径
新的路由器3.0.0中有什么模拟deprecated-router方法 generate？早期它可能需要这样的事情:
this._router.generate(['Profile']).urlPath;
新路由器怎么做？
推荐指数
解决办法
查看次数
标签 统计
angular-routing ×10
angular ×7
angularjs ×3
javascript ×2
angular-dart ×1
angular-ui ×1
dart ×1
nginx ×1