在我们的应用程序中，我们测试用户是否同意使用条款，然后再授予他访问请求表单的权限。

我设置了一个 CanActivate 警卫检查它。如果它是错误的，我会遇到一个奇怪的行为：我可以在很短的时间内（眨眼！）看到请求表单，然后才真正重定向到条款。如果警卫是假的，我如何防止这种行为并直接重定向。

守卫不是应该在激活守卫路线之前完成他们的检查吗？

这是我的路由：

import { Routes } from '@angular/router';
import { RequestFormComponent} from './request-form.component';
import { TermsComponent } from './terms.component';
import { TermsGuard } from './services/terms-guard.service';

export const secretRoutes: Routes = [
  {
    path: '',
    redirectTo: 'form'
  },
  {
    path: 'form',
    component: RequestFormComponent,
    canActivate: [TermsGuard ]
  },
  { path: 'terms', component: TermsComponent },      

  // otherwise redirect to form
  { path: '**',  redirectTo: 'form' }
];

根据同一个问题，有没有办法在这个数组中定义默认路由？为了避免写两行：

  {
    path: '',
    redirectTo: 'form'
  },
  {
    path: 'form', …

在我们的应用程序中，我们有一个简单的商店，在根级别包含 anAuthState和 a RouterState。它RouterState是通过@ngrx/router-store方法创建的。

我们有一些选择器必须使用 RouterState 来检索例如参数，然后将其与其他选择器结果组合。

我们的问题是我们无法设法找到一种方法来正确设置测试套件以便能够测试此类组合选择器。

减速机设置

应用程序模块导入

StoreModule.forRoot(reducers, { metaReducers }),
StoreRouterConnectingModule.forRoot({
  stateKey: 'router',
}),
StoreDevtoolsModule.instrument(),

reducers存在以下情况：

减速机

export interface RouterStateUrl {
  url: string;
  queryParams: Params;
  params: Params;
}

export interface State {
  router: fromNgrxRouter.RouterReducerState<RouterStateUrl>;
  auth: fromAuth.AuthState;
}

export const reducers: ActionReducerMap<State> = {
  router: fromNgrxRouter.routerReducer,
  auth: fromAuth.reducer,
};

export const getRouterState = createFeatureSelector<fromNgrxRouter.RouterReducerState<RouterStateUrl>>('router');

export const getRouterStateUrl = createSelector(
  getRouterState,
  (routerState: fromNgrxRouter.RouterReducerState<RouterStateUrl>) => routerState.state
);

export const isSomeIdParamValid = …

语境

我正在尝试测试一个组件。在另一篇文章中，我询问了有关测试直接函数调用的问题。在这里，我使用相同的示例组件专注于我的组件的错误处理。

我想测试，当我的服务返回一个可观察到的错误时，我的组件是否正确调用了 console.error(error)。

如何“创建”此错误触发器并测试我的组件是否正确处理它。我听说间谍可以做到这一点，但我不知道在哪里设置这个间谍。

我想模拟服务上的 http 请求可能失败的情况。出于任何原因或任何错误代码。

代码

这是组件、存根服务和我的规范文件的代码。

成分

import { Component, OnInit, ViewContainerRef } from '@angular/core';

import { UserManagementService } from '../../shared/services/global.api';
import { UserListItemComponent } from './user-list-item.component';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  public userList = [];

  constructor(
    private _userManagementService: UserManagementService,    
  ) { }

  ngOnInit() {
    this.getUserList();
  }

  onRefreshUserList() {
    this.getUserList();
  }

  getUserList(notifyWhenComplete = false) {
    this._userManagementService.getListUsers().subscribe(
      result => {
        this.userList = result.objects;
      },
      error => {
        console.error(error); // That's …

上下文

我有一个基本形式的组件(反应形式).我尝试在此表单上测试提交事件,看它是否正确调用了必要的方法.

我的问题

我无法触发表单的提交事件

档

Component.html

<form class="form-horizontal"
  id="staticForm"
  [formGroup]="mySimpleForm"
  (ngSubmit)="sendMethod();"
>
  <input type="text" formGroupName="email">
  <button type="submit">Send form</button>
</form>

Component.ts

  ngOnInit() {
    this.initSimpleForm();
  }

  private initSimpleForm() {
    let file = null;

    this.mySimpleForm = this.formBuilder.group({
      email: [
        '',
        [
          Validators.required
        ]
      ]
    });
  }

  sendMethod() {
    console.log('submitted');
  }

component.spec.ts

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        MyComponent
      ],
      imports: [],
      providers: [
        FormBuilder
      ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    comp = fixture.componentInstance;
});  

it(`should notify in …

在我们的组件之一中，我们用于Renderer2向body元素添加和删除一些CSS类/样式。为此，我们只需执行以下操作：

this.renderer.setStyle(document.body, 'padding-left', '10px');
this.renderer.addClass(document.body, 'modal-container--opened');

一旦运行测试，就会遇到错误：

无法读取未定义的属性“添加”

无法设置未定义的属性“ padding-left”

因此，有角度的testBed似乎没有创建任何body元素。

在我们的测试配置中，如何创建模拟的body元素？因此，我们可以对该元素运行测试，并查看渲染器是否正确应用了样式/类。

似乎也无法嘲笑Renderer2。

我们试图创建一个间谍：

let renderer: jasmine.SpyObj<Renderer2>;
renderer = jasmine.createSpyObj('renderer', ['addClass', 'removeClass', 'setStyle']);

然后进入TestBed.configureTestingModule（也进行了测试，overrideProviders但未获得更多成功）：

{ provide: Renderer2, useValue: renderer }

但是Angular完全忽略了此覆盖。

如何能够测试我们的组件行为，对其进行操作document.body？

我们的项目有结构:

• AppComponent
  • 导航组件
  • LoginComponent

用户使用调用Firebase的表单进行身份验证后,必须将用户重定向到只有登录用户可访问的部分.

• AccountComponent
  • ProfileComponent
  • FilesComponent

如您所见,帐户组件有两个孩子.

我正在寻找一种正确的方法来阻止非身份验证用户访问我的网站的受保护区域,并且不知道我是否必须在组件中调用authService (appComponent？AccountComponent？OnInit中的一个组件？)或者在 CanActivate或CanActivateChild 的路径定义中？

我在这里有一个启动docker脚本:

#!/usr/bin/env bash
set -e

echo '>>> Get old container id'
CID=$(sudo docker ps --all | grep "web-client" | awk '{print $1}')
echo $CID


echo '>>> Stopping and deleting old container'
if [ "$CID" != "" ];
then
  sudo docker stop $CID
  sudo docker rm $CID
fi


echo '>>> Starting new container'
sudo docker pull my-example-registry.com:5050/web-client:latest
sudo docker run --name=web-client -p 8080:80 -d my-example-registry.com:5050/web-client:latest

事实是这个脚本有更好的结果.每次运行脚本时,它都会删除旧容器.

"启动新容器"部分将提取最新图像.如果图像本地是最新的,这是docker pull的示例输出:

状态:图像是my-example-registry的最新版本:5050/web-client:latest

有没有办法通过添加条件来改进我的脚本:

在此之前,通过docker check检查本地映像是注册表中可用的最新版本.然后,如果它是最新版本,请继续停止并删除旧容器操作,并且docker运行新的拉出图像.

在此脚本中,如何解析状态以检查本地映像是否对应于注册表中最新的？

也许docker命令可以做到这一点,但我找不到有用的命令.

在Angular应用程序中,我们执行一个方法.在调用此方法之后,我们需要触发两个其他方法,间隔时间.

Method call -> wait 150 ms ----> second action -> wait 300 ms -------- > third action

我可以设置两个嵌套setTimeout.它有效,但我发现它很难看.

public toggleSideContainer() {
    this.myLayoutService.toggleSideContainer();

    setTimeout(() => {
        this.renderer.addClass(this.mainContainer, 'side-container');

        setTimeout(() => {
            this.renderer.addClass(this.sideContainer, 'open');
        }, 300);
    }, 150);
}

什么是正确的rxjs运算符/序列以正确的rxjs方式获得此结果？

我们有一个包含重复部分的 gitlab-ci yaml 文件。

test:client:
  before_script:
    - node -v
    - yarn install
  cache:
    untracked: true
    key: client
    paths:
      - node_modules/
  script:
    - npm test

build:client:
  before_script:
    - node -v
    - yarn install
  cache:
    untracked: true
    key: client
    paths:
      - node_modules/
    policy: pull
  script:
    - npm build

我想知道，使用合并语法，是否可以提取公共部分以在这两个部分的上下文中有效地重用它。

.node_install_common: &node_install_common
  before_script:
    - node -v
    - yarn install
  cache:
    untracked: true
    key: client
    paths:
      - node_modules/

但真正的问题是：我必须在哪个缩进级别合并块以确保 policy: pull 应用于缓存部分。我试图这样做：

test:client:
  <<: *node_install_common
  script:
    - npm test

test:build:
  <<: *node_install_common …

我尝试获得窗口innerWidth的可观察值。

我fromEvent对尺寸调整事件设置了可观察的观看

public get nativeWindow(): Window {
  return window;
}

public getWindowSize(): Observable<number> {
  return fromEvent(this.nativeWindow, 'resize').pipe(
    map(event => (event.target as Window).innerWidth)
  );
}

我希望能够获取window.innerWidth的初始值，因为在实际调整窗口大小之前不会触发调整大小。

我可以使用，BehaviorSubject但它迫使我订阅fromEvent下一个主题。

我们尝试startWith(this.nativeWindow.innerWidth)在地图之前使用运算符，但随后地图没有将event参数作为Event而是获取了startWith数字。

是否有任何rxjs运算符可以让我在获取实际的调整大小事件之前初始化第一个数字？

我尝试为打字稿中的哈希图创建一个强类型接口。

哈希映射包含一个带有动态字符串名称的键。和 avalues其中包含一个泛型类型的数组。

我尝试使用以下界面：

export interface DynamicHashmap<T> {
  [dynamicKey: string]: string;
  values: T[];
}

但它不会编译并继续抱怨：

[ts] 类型“T[]”的属性“值”不可分配给字符串索引类型“字符串”。

与此类型对应的生成值的示例，它根据对象属性对值进行分组（此处User.group）。在此dynamicKey决定group。

const user1: User = { id: 'userValue1', group: 'someGroupId' };
const user2: User = { id: 'userValue2', group: 'someGroupId' }; 
const result = {
  group: 'someGroupId',
  values: [
    { id: 'userValue1', group: 'someGroupId' },
    { id: 'userValue2', group: 'someGroupId' }
  ]
}

我猜静态values会干扰动态键。

我怎样才能实现我们正在寻找的强类型？

我想在 CSHTML 文件中包含 Angular2 构建文件。

目前，我的包括：

@section scripts {
    <script src="~/dist/main.js" asp-append-version="true"></script>
}

但是 Angular2 会在每个 prod 构建中生成文件名中具有不同标识符的文件。

chunk    {0} main.2e0750e4cb976b8dca8a.bundle.js (main) 15.8 kB {3} [initial] [rendered]
chunk    {1} styles.b64dd2f7c2e3011c4efb.bundle.css (styles) 154 kB {4} [initial] [rendered]
chunk    {2} scripts.e7e62c29938f18f13e86.bundle.js (scripts) 128 kB {4} [initial] [rendered]
chunk    {3} vendor.05b8df0708b580c61647.bundle.js (vendor) 3.42 MB [initial] [rendered]
chunk    {4} inline.1b4aa06545162c1bb581.bundle.js (inline) 0 bytes [entry] [rendered]

我不想停用（如果可能的话）包含这些标识符的事实（用于非缓存目的）。一个人在 github 问题页面上回答了一些正则表达式可以用来制作包含：

/(main|styles|scripts|vendor|inline).*.bundle.(map|js|css)/g

但我不知道如何将它传递给我的 C#/cshtml 文件。

它应该导致在给定目录（wwwroot 或 ~ 作为快捷方式）中包含与模式匹配的所有文件。

关于如何实现这一目标的任何想法？