标签: angular-routing

是否可以在保留所有其他参数的同时更改当前路径中的单个路径参数？这用于寻呼组件,该寻呼组件将路由到新页面,同时保持当前路由的其他部分相同.

一些例子:

• 第2页的默认页面:orders?foo=foo&bar=bar>orders?foo=foo&bar=bar&page=2
• 默认页面到第2页(孩子):orders/;foo=foo;bar=bar>orders/;foo=foo;bar=bar;page=2
• 有关参数的孩子和父母的第2页到第3页:orders/;foo=foo;page=2?bar=bar>orders/;foo=foo;page=3?bar=bar

我尝试过使用a routerLink,但这会丢失原本不属于路由器链接的任何其他参数.

我也尝试使用当前路径Router来获取Instruction当前路径,但是Instruction在调用时改变参数似乎没有任何影响navigateByInstruction().

我正在为我的Navbar组件创建一个单元测试,我收到一个错误:

无法绑定到'routerLink',因为它不是'a'的已知属性

Navbar组件TS

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { NavActiveService } from '../../../services/navactive.service';
import { GlobalEventsManager } from '../../../services/GlobalEventsManager';

@Component({
  moduleId: module.id,
  selector: 'my-navbar',
  templateUrl: 'navbar.component.html',
  styleUrls:['navbar.component.css'],
  providers: [NavActiveService]
})
export class NavComponent {
  showNavBar: boolean = true;

  constructor(private router: Router,
              private navactiveservice:NavActiveService,
              private globalEventsManager: GlobalEventsManager){

    this.globalEventsManager.showNavBar.subscribe((mode:boolean)=>{
      this.showNavBar = mode;
    });

  }

}

导航组件规格

import { ComponentFixture, TestBed, async } from '@angular/core/testing';    
import { NavComponent } from './navbar.component';
import { DebugElement } …

我创建了两个关于路由的loadChildren和outlet导航问题的掠夺者.出于某种原因,在加载的子模块中具有空基本路径不适用于出口导航.

在此示例中,按"联系人"链接失败.

APP-routing.module

const appRoutes: Routes = [
  { path: 'admin', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admin', pathMatch: 'full' }
];

管理员-routing.module

const adminRoutes: Routes = [
{ 
  path: '', 
  component: AdminComponent,
  children: [ 
    {
      path: 'compose',
      component: ComposeMessageComponent,
      outlet: 'popup'
    }
  ]
}];

在此示例中,按"联系人"链接可以正常工作.

APP-routing.module

const appRoutes: Routes = [
  { path: 'admi', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admi/n', pathMatch: 'full' }
];

管理员-routing.module

const adminRoutes: Routes …

我正在尝试使用角度为6的以下类来处理http错误.我从服务器获得了401 unAuthorized状态.但是,我没有看到控制台错误消息.

HttpErrorsHandler.ts文件

import { ErrorHandler, Injectable} from '@angular/core';
    @Injectable()
    export class HttpErrorsHandler implements ErrorHandler {
      handleError(error: Error) {
         // Do whatever you like with the error (send it to the server?)
         // And log it to the console
         console.error('It happens: ', error);
      }
    }

app.module.ts文件

providers: [{provide: ErrorHandler, useClass: HttpErrorsHandler}],

HttpCallFile

import { Injectable , Component} from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from 'rxjs';
import {AuthServiceJwt} from '../Common/sevice.auth.component';

@Injectable()
export class GenericHttpClientService …

对于使用抽象状态和控制器作为语法的页面,我有以下状态设置:

# Details page route
.state 'title', 
  url: '/title',
  abstract: true,
  template: '<ui-view/>',
.state 'title.show', 
  url: '/:titleId',
  templateUrl: 'title/show.html'
  controller: 'Title as t'

为了这个演示的目的,我可以说我将一个变量分配给'Title'控制器的't'实例,我在Title控制器函数中执行此操作.

angular.module('title').controller 'Title',
 ['$state', ($state) ->
   this.name = 'Test'

在我的视图'title/show.html'中,我尝试打印出刚刚创建的变量到页面:

{{t.name}}

我什么都没看到.但是,如果我将ui-router的控制器移到包含'title/show.html'页面的元素上,如下所示:

<div ng-controller="Title as t">

一切都很好.有没有人遇到过这个问题.我在其他应用程序中工作正常,所以我仍然想弄清楚这个应用程序可能有什么不同,可能是js库版本的差异.

我已经开始在快速生成的项目中使用角度,我很喜欢它.最近我在我的一个测试项目中实现了角度路由,我想知道在纯快速/节点路由上使用角度路由有什么优点和缺点(例如,这种方式存在技术问题,或者SEO,或者它是否完全不必要).

仅供参考我的设置:我已经表达了主索引模板以及将所有请求(全部捕获)路由到主索引模板,然后我使用angular从主索引模板中路由到部分模板

我试图改变用户访问我的网站时看到的页面.如果他们是匿名的,他们应该看到注册页面.如果他们已登录,他们应该看到他们的仪表板.

我有一个服务,它检查用户是否登录(例如检查cookie),当Angular服务加载时触发.我试图使用$ routeProvider重定向但是在初始化$ routeProvider时没有触发服务,所以它总是认为用户没有登录.

一旦加载了初始页面,我就可以轻松地重定向,但是我很难重定向加载的第一页.任何人都可以就如何做到这一点提出建议吗？

我想导航到另一个状态/屏幕并将一个简单的json对象传递给下一个屏幕.

我有以下内容:

var benefit = { "x": "y"};
$state.go('pages.claimed', { 'benefit': benefit });

我的州看起来像这样:

.state('pages.claimed', {
  url: '/claimed',
  views: {
    'page': {
      templateUrl: 'templates/pages/claimed.html'
    }
  }
})

但是,我无法访问pages.claimed视图中的"benefit"对象/参数.我正在使用基于角度的离子框架.

谢谢你指点我正确的方向!

我想要做什么当用户访问index.html页面时,我需要登录模块做两件事:

1. 我需要这个来检查用户是否经过身份验证(我认为我已经开始使用"function authService")如果用户有一个有效的令牌然后将ui-view更改为dashboard/dashboard.html并且密钥无效或者根本没有密钥然后将login/login.html加载到ui-view中.

2. 一旦他们成功登录,我希望他们被路由到"dashboard/dashboard.html"

这是我的登录脚本:

function authInterceptor(API) {
  return {
    request: function(config) {
      if(config.url.indexOf(API) === 0) {
        request.headers = request.headers || {};
        request.headers['X-PCC-API-TOKEN'] = localStorage.getItem('token');
      }
      return config;
    }
  } 
}

function authService(auth) {
  var self = this;
  self.isAuthed = function() {
    localStorage.getItem('token');
  }
}

function userService($http, API) {

  $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;';
  $http.defaults.transformRequest = [function(data) {
      return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }];

  var self = this;

  self.login = function(username, pwd, ctrl) {
    ctrl.requestdata = …

我有一个简单的网站,它实现了jQuery,以便在Index.html顶部横幅中创建一些带有一些图像的Slider.

现在,我想使用AngularJS,所以我将HTML代码分解为单独的部分.

1. 头
2. 页脚
3. 顶级横幅

如果我在原始版本中运行Index.html(不应用AngularJS模式),那么我可以看到滑块工作正常.

在应用AngularJS模式时,我将顶部横幅HTML移动到部分html,然后将ng-view应用于顶部横幅最初所在的div.

var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
    when('/about',{templateUrl:'app/partials/about.html'}).
    when('/contact',{templateUrl:'app/partials/contact.html'}).
    otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'})
});

当我刷新页面滑块不工作时,渲染为简单的html没有任何jQuery效果,真是一团糟.

这个部分有一些jQuery插件,通常由document.ready激活.但是当角度载荷部分在ng视图中时,此事件不会触发.如何调用此事件来初始化jQuery插件？

有任何线索如何解决这个问题？

感谢任何帮助.