小编Daw*_*ski的帖子

我想创建一个带有多个参数的路由链接,并将它们绑定在tempalte中.到目前为止,我一直在通过执行(click)事件的函数来做到这一点,但我想知道它是否可能在RouterLink绑定中.

这是我用来绑定参数的函数:

redirect() {
    this._router.navigate( ['/category', { cat: this.category, page: this.page }]);
}

我的路线看起来像:

{
    path: 'category/:cat/:page',
    component: PostComponent
}

我可以做同样的内部routerLink指令吗？

我们最近在这个问题中讨论了一个用于OAuth身份验证令牌刷新的axios'拦截器.

基本上,拦截器应该做的是拦截任何带有401状态代码的响应并尝试刷新令牌.考虑到这一点,接下来要做的是从拦截器返回一个Promise,这样任何通常会失败的请求都会在令牌刷新后没有任何反应的情况下运行.

主要的问题是,拦截器只检查401状态代码,这是不够的,因为它refreshToken还会401在失败时返回状态代码 - 我们有一个循环.

我想到了两种可能的情况:

1. 检查被叫URL,如果是这样,/auth/refresh它不应该尝试刷新令牌;
2. 在refreshToken调用逻辑时省略一个拦截器

第一个选项对我来说看起来有点"不动态".第二种选择看起来很有希望,但我不确定它是否可能发生.

那么主要的问题是,我们如何区分/识别拦截器中的调用并为它们运行不同的逻辑而不对其进行"硬编码",或者是否有任何方法可以省略指定调用的拦截器？先感谢您.

拦截器的代码可能有助于理解这个问题:

Axios.interceptors.response.use(response => response, error => {
    const status = error.response ? error.response.status : null

    if (status === 401) {
        // will loop if refreshToken returns 401
        return refreshToken(store).then(_ => {
            error.config.headers['Authorization'] = 'Bearer ' + store.state.auth.token;
            error.config.baseURL = undefined;
            return Axios.request(error.config);
        })
        // Would be nice to catch an error here, which would work, if …

我正在开发一个小API,我想尝试使用HTTP PATCH REQUEST而不使用一堆if语句来更新数据.我正在尝试仅使用更改的数据填充传出数据对象.

update() {
    let prop1 = hasBeenChanged.prop1 ? changedData.prop1 : null;
    // ...
    let propN = hasBeenChanged.propN ? changedData.propN : null;

    let data: IPatchProfile = {
        // something like --> property != null ? property: property.value : nothing
    }
}

有没有办法动态创建数据对象？

我有一个输入,用户需要输入经度.我希望能够在用户输入NaN或Not-Precise-Enough值时显示不同的错误消息.我正在使用FormControl.hasError('ValidatorsName')验证来获取错误,但似乎我无法区分这些模式.

模板:

<mat-form-field class="form-field">
    <input matInput placeholder="Logitude" [formControl]="longitude">
    <mat-error *ngIf="longitude.hasError('pattern')">
        Longitude must be <strong>a number</strong>
    </mat-error>
    <!-- I want to be able to check patter2 for example -->
    <mat-error *ngIf="longitude.hasError('pattern')"> 
        Longitude must have <strong>a minimum of 5 decimal numbers</strong>
    </mat-error>
</mat-form-field>

我的Angular代码:

this.longitude = new FormControl(this.attraction.longitude, [
    // is valid number
    Validators.pattern(new RegExp('(\d{1,3})([.|,]{,1})(\d+))','gi')),
    // is precise enough
    Validators.pattern(new RegExp('(\-{0,1})(\d{1,3})([.|,]{1})(\d{5,13})','i'))
]);

有没有办法给这些模式一个标识符？我会感激任何帮助.

我正在尝试创建一个"固定宽度"表,但只要列中的数据大于其余部分,它就会以某种方式更改列宽.

例如,下表更改最后一个数字的宽度,即10.

<table>
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td rowspan="2" colspan="2">7</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>8</td>
        <td colspan="2">9</td> 
        <td>10</td>
    </tr>
</table>

这是我的CSS:

table {
    border: 1px solid;
    width: 400px;
    height: 300px;
}

我的app.component中有方法可以更改LangService中的语言.当发生更改时,LangService应该使用Observable对象响应所有其他组件,因为我订阅了所有组件中的更改.不幸的是,它没有发生.它只响应调用该函数来改变语言的app.component.我不确定我在哪里弄错了.也许我只是误解了整个概念,因为我是Angular的新手.

这是代码:

app.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">                                           
        {{ title }}
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <ol class="breadcrumb">
          <li *ngFor="let lang of langs">
            <a (click)="changeLanguage(lang)">
              {{ lang }}
            </a>  
          </li>
        </ol>
      </ul>
    </div>
  </div>
</nav>
<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import './rxjs-operators';
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { LangService } from './lang.service';
import { NotesComponent } from './notes/notes.component';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html', …

我的申请中的路线很少.父路线admin很少有其他子路线posts, about-me, categories.我希望能够访问子路由并在用户想要的情况下导航回去.我试图添加一个链接

<a class="pointer" [routerLink]="['admin']">Back</a>

但是,路由器只是将此链接添加到ActivatedRoute (所以网址看起来像:http:// localhost/admin/posts/admin).

所以我的问题是从儿童路线导航回来的正确方法是什么？先感谢您.

我正在为我的项目开发一个小型异步库.我决定用TypeScript编写它,但我的编译器给我一个错误'XMLHttpRequest' does not exist on type 'Window',正如标题所说.

如果窗口没有XMLHttprequest,我想要实现的是ActiveXObject的创建.

if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
 } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

我不一定要把它包括在内,但我想知道为什么会这样？

我正在使用的IDE是VS Code(它也向我显示错误)并且我正在编译 gulp-tsify

我正在开发一个有很多共享元素的项目,例如页脚,标题,导航等.我在我的视图中扩展了几个布局.现在,我正在我的视图中加载共享元素,但是我需要提供我正在加载它的视图中的每个共享元素所需的所有资源(依赖项).我希望能够跳过这一步并加载实际准备使用的元素(所以我不需要记住所有依赖的javascript和css文件,因为它们中的一些可能有一些) .

我正在考虑在元素视图中指定共享元素所需的所有资源,所以当我包含我需要的元素时,它会"自动"加载资源,而不是在我的视图中指定所有这些资源.所以我的问题是,是否有可能做到这一点或者什么是正确的方法来实现这一目标？

希望使用代码更好地解释:

结构体:

views/
- /layout/
    -> layout.twig
- /homepage/
    -> index.twig
- /shared/
    -> navigation.twig

布局:

<!-- HTML headers, etc. -->
{% block assets %}
    <link rel="stylesheet" href="xxx" />
{% endblock %}

{% block content %}

{% endblock %}

视图:

{% extends "layout/layout.twig" %}
{% block assets %}
    {{ parent() }}
    <!-- some assets for view -->    
{% endblock %}
{% block content %}
    {% include "shared/navigation.twig" %}
    <!-- content -->
{% endblock %}

共享元素navigation.twig:

// It's …

在 Angular 工作了一段时间后，我意识到我们在路由的数据订阅者中没有设置任何数据类型。因此，例如，使用以下路由配置：

{
  path: '',
  data: {
    name: 'Bob' // type: string
  },
  resolve: {
    cars: CarsResolver // resolves to type: Car[]
  }
}

当订阅路线数据时，我们无法知道期望的数据类型

ngOnInit(): void {
  this.route.data.subscribe(data => 
    data.cars // type: any
    // data is a type of Data, unfortunately there's nothing like this.route.data<type>
  });
}

这对于智能感知的正常工作很有用，当然也有助于在编译时捕获各种错误。目前有没有办法指定数据结构？先感谢您。