小编Lau*_*nAH的帖子

我希望在我的 Angular 6 应用程序中创建一个守卫，通过要求他们首先确认来防止使用部分填写的表单从站点内的表单导航（不是通过关闭浏览器或刷新）。

我怎样才能建立我的守卫，以便我可以将它应用到我的路线上，并防止用户意外地从肮脏的表格中导航？

我试图将表单注入到保护组件中，观察它是否脏，如果是，将该保护应用到任何其他路由并让用户在导航到它们之前进行确认。这几乎是我所能得到的，任何帮助将不胜感激。

这是我到目前为止所拥有的：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { NgForm } from "@angular/forms";
import { createMPForm } from "../components/site-settings/site-settings.component"

@Injectable({
  providedIn: 'root'
})

@Injectable()
export abstract class FormGuard implements CanActivate {
  abstract get form(): NgForm;
  formDirty(): boolean {
     return createMPForm.dirty
  }

  constructor() { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.formDirty()) {
      if …

多次循环子组件但每次使用不同数据的最佳方法是什么？

例如，在我的“站点列表”组件（父组件）中，我想遍历我的“摘要”组件（子组件），尽可能多地遍历数据。“摘要”将只是与我从服务“站点”中提取的对象数组中的每个索引相对应的数据。

1. 考虑到这种父/子关系，显示此数据的最佳方式是什么？

2. 我需要声明数据并从服务中获取它的哪个文件（sitelist.component.ts 或 summary.component.ts）？

对于#1，我可以更改什么以正确循环遍历这些数据？不确定我可以传递这样的数据。

Sitelist.html（父级）

<div *ngFor="let site of sites">
  <app-summary></app-summary>
</div>

summary.html（子）：

 <li>{{site.id}}</li>
 <li>{{site.name}}</li>
 <li>{{site.location}}</li>

对于#2，根据#1 的答案，我应该将可观察对象放入哪个文件以从服务中获取数据？（sitelist.component.ts 或 summary.component.ts）

ngOnInit() {
  let observable = this._dataService.getSites()
  observable.subscribe(data => {
      console.log("got info")
      console.log(data)
      this.sites = data
    })}
}

在我的服务中，我有：

export class DataService {
    sites;
    constructor(private _http: HttpClient) { }
    getSites(){ 
      return this._http.get(`http://localhost:3000/sites.json`);
    }
}

谢谢！！如果我能澄清任何事情，请告诉我

我正在Ububtu 16.04上部署Angular项目，并在运行sudo npm install时遇到这些错误。（没有sudo将无法工作）。看来npm没有安装许可。我最近将nodejs更新为8.11.4，但仍然有相同的错误，因此显然不是版本问题。如何给它正确的权限？

gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/var/www/project_name/node_modules/node-sass/build'
gyp ERR! System Linux 4.4.0-1065-aws
gyp ERR! command "/usr/local/bin/node" "/var/www/project_name/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "-libsass_library="
gyp ERR! cwd /var/www/front-stormsensor/node_modules/node-sass
gyp ERR! node -v v8.11.4
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1

我的项目中有什么问题吗？还是安装不正确？不知道从这里去哪里，谢谢

我正在用 d3 构建折线图，并试图使我的刻度线变成灰色，而我的轴和刻度线标签将变成深灰色。如何在不使用 CSS 的情况下在 d3 中设置内联样式？我似乎不太正确。提前致谢！

这就是我构建 x 和 y 轴的方式：

var xAxis = d3.axisBottom(x)
  .scale(x)
  .ticks((width + 2) / (height + 2))
  .tickSize(-height)
  .tickPadding(10)
  .tickFormat(d3.timeFormat("%b %d, %H:%M:%S"))


var yAxis = d3.axisLeft(y)
  .scale(y)
  .ticks(5)
  .tickSize(-(width - 100))
  .tickPadding(10)

我如何附加它们：

var gX = svg.append("g")
  .attr("class", "axis--x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
var gY = svg.append("g")
  .attr("class", "axis--y")
  .call(yAxis)

我试图把：

.style("stroke", "#c3c3c3")

在我的 y 轴上是这样的：

var gY = svg.append("g")
  .attr("class", "axis--y")
  .call(yAxis).style("stroke", "#c3c3c3")

但这只会改变我的刻度标签的颜色，而不是线条......我可能哪里出错了？

谢谢

我正在尝试在我的 Angular 6 Jasmine 组件测试中创建一个模拟 AuthService。我似乎无法将其配置为“登录”并正确使用我的 MockAuthService。

我缺少什么类型的配置/我有错吗？如何正确地将我的服务注入到我的测试中？

这是我收到的错误：

TypeError: Cannot read property 'userContext' of null

以及它发生在我的 .ts 文件中的位置：

this.authService.getCurrentUsers(this.authService.userSession.userContext.id, this.authService.userSession.authToken)
      .subscribe(data => { ...

这是我的整个测试文件：

import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientModule } from '@angular/common/http';
import { DeviceComponent } from './device.component';
import { NavigationComponent } from '../navigation/navigation.component';
import { SensorPageChartComponent } from '../sensor-page-chart/sensor-page-chart.component';
import { AuthService } from '../../services/auth.service'

describe('DeviceComponent', () => {
  let component: DeviceComponent;
  let fixture: ComponentFixture<DeviceComponent>;

  class MockAuthService …

我在Angular 5中使用d3（版本4），并且遇到了一些错误，我找不到很多信息。在我的name.component.ts中，我有d3代码，并且在某些行下出现错误。

var x = d3.scaleTime()
  .rangeRound([0, width])
  .domain(d3.extent(this.data, function (d) { return d.date; }));

var y = d3.scaleLinear()
  .rangeRound([height, 0])
  .domain(d3.extent(this.data, function (d) { return d.ratio; }));

对于这两行，我都得到了域内所有内容下方的红线（d3.extent（this.data，function（d）{return d.ratio;}））。

错误是：

Argument of type '[string, string] | [undefined, undefined]' is not 
assignable to parameter of type '(number | Date | { valueOf(): number;}) []'.
Type '[string, string]' is not assignable to type '(number | Date | 
{valueOf(): number; })[]'.
Types of property 'push' are incompatible.
  Type '(...items: string[]) => number' …

我需要将我的服务和身份验证服务添加到我的app.component.ts,但我似乎无法在我的构造函数参数中添加它们.我怎么能这样做,仍然可以在整个应用程序中使用？这就是我所拥有的:

constructor(private _dataService: DataService, authToken: Angular2TokenService) {
     this.authToken.init(environment.token_auth_config)
 }

错误是:'AppComponent'类型中不存在属性'authToken'.

已导入所有必需的项目.

我怎么能写两个？我发现的大多数答案都是针对Angular的旧版本.谢谢.