标签: angular5

我正在开发一个应用程序，使用最新的 Angular 作为前端，在服务器上使用 Symfony + Apache。应用程序和服务器位于不同的域中，但我的服务器通过发送所需的 CORS 标头（由 NelmioCors Bundle 创建）来允许它。但是Chrome没有发送Origin标头，这会触发Bundle发送标头。

STRG不知怎的，当我用+ SHIFT+调用页面时，R它加载没有问题。

设置Vary: Origin没有帮助。

为什么 Chrome 缓存请求时没有允许 Origin 标头/首先不发送 Origin？

在使用 AngularJS 1.x 框架开发了 2 年之后，我目前正在学习 Angular 框架（版本 5），所以我问自己很多问题，其中之一是如何正确导入另一个模块提供的服务我的申请。

假设我有一个CoreModule提供服务的示例MyService，假设该项目具有以下文件树：

app/
   app.module.ts
   ...
pages/
   clients/
      clients.component.html
      clients.component.css
      clients.component.ts
   ...
core/
   core.module.ts
   providers/
      my-service.service.ts

现在假设我的页面需要从模块clients注入服务。为此，我将放入模块的提供者列表中。我将导入我的.MyServiceCoreModuleMyServiceCoreModuleCoreModuleAppModule

如果我很好理解，通过执行这样的导入，我会告诉我的应用程序MyService在模块的 .ts 文件中需要该服务时使用该服务AppModule。

但我无法理解的是在我的应用程序代码中包含声明服务的 .ts 文件。事实上，如果我想使用该MyService服务，我会在课堂上做类似的事情Clients：

constructor(private service: MyService) {
   // using of the injected service
}

但 TypeScript 需要声明服务的 .ts 文件的引用。我的第一次尝试是按照文件树导入文件：

import { MyService } from '../../core/providers/my-service.service';

但这对我来说感觉不对，因为当我导入 Angular 服务时，我不必指定访问声明相关服务的文件的路径。服务示例HttpClient：

import { HttpClient …

如何在 Angular 5 中获取当前请求的 url？

我尝试了在网上找到的几个解决方案，但似乎没有任何效果。- $window - 在 WindowRef 示例中包装本机窗口

我整个早上都在寻找这个，但对 Angular 有点陌生，并且迷失在针对不同版本 Angular 的在线不同示例中。

更新：我正在使用 TypeScript

谢谢

我正在使用 TypeScript 学习 Angular 5。我对此完全陌生。我现在正在尝试构建一个表单并验证它。但它无法正常工作。

这是我的组件：

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    animations: [routerTransition()]
})
export class LoginComponent implements OnInit {

    loginForm: FormGroup;

    errors = [];

    constructor(private fb: FormBuilder, public router: Router, private globals: GlobalsService, private http: Http) {

    }

    ngOnInit() {
        this.loginForm = new FormGroup({
            email: new FormControl("", Validators.required),
            password: new FormControl("")
        });
    }

    onLoggedin(formData) {
        
        alert("Submit form");
  
  
    }

}

如您所见，我在电子邮件字段上设置“必需”验证属性。这是我的html。

<div class="login-page" [@routerTransition]>
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <img src="assets/images/logo.png" width="150px" class="user-avatar" />
            <h1>Yo Cash Flow</h1>
            <div …

在我的 Angular 5 应用程序中，用户可以导航到使用相同路线但具有不同参数的路线。例如，他们可能从 导航/page/1到/page/2。

我希望这个导航能够触发路由动画，但它没有。如何使路由器动画在这两条路线之间发生？

（我已经明白，与大多数路线更改不同，此导航不会破坏并创建新的PageComponent。解决方案是否改变此行为对我来说并不重要。）

这是一个重现我的问题的最小应用程序。

如何配置 Angular 组件不触发整个应用程序的更改检测，而只触发组件本身及其子组件？

工作示例：https : //stackblitz.com/edit/angular-irc-starter-4txpbu?file=app%2Ftimer%2Ftimer.component.ts

有一个计数器每秒增加一个值。它是 TimerComponent 并且它按预期工作 - 每秒增加和更新值。

@Component({
  selector: 'app-timer',
  template: `{{value}}`
})
export class TimerComponent implements OnInit {
  value: number = 0;
  ngOnInit() {
    setInterval(() => this.value++, 1000);
  }
}

但是，请查看父组件 AppComponent。

<h3>Internal timer:</h3>
<p>Should not perform change detection for the whole app</p>
<app-timer></app-timer>

<h3>External binding</h3>
<p>Should not be updated after timer changes</p>
<p>{{someBindingProperty}}</p>

someBindingProperty是一个吸气剂：

get someBindingProperty() {
  this.bindingTimer++;
  return this.bindingTimer;
}

问题：当 TimerComponent 增加值时，会触发整个应用程序的更改检测。是否可以仅在组件和子组件内触发更改检测？

注意：如果我添加到 TimerComponent：

changeDetection: ChangeDetectionStrategy.OnPush

然后在此组件中不会检测到更改，但仍会为整个应用程序触发更改检测。所以这不是一个解决方案。

我有一个 Angular 5 应用程序。我想知道是否有任何方式只为 Angular 5 中的一个模块导入引导程序或任何其他库？

我想实现只有一行选择的表。现在我有多项选择。

我尝试了双门轿跑车的方法来做到这一点，但我坚持使用这种方法。

图例：

组件.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { UsersReadRepository } from '../../../../core/services';
import { MatTableDataSource } from '@angular/material';
import { User } from 'domain-models';
import { Observable, Subscription } from 'rxjs';
import { Subscribable } from 'rxjs/Observable';
import { SelectionModel } from '@angular/cdk/collections';

@Component({
    selector: 'choose-supervisior',
    templateUrl: './chooseSupervisior.component.html',
    styleUrls: ['./chooseSupervisior.component.scss']
})

export class ChooseSupervisiorComponent implements OnInit, OnDestroy {
    selectedRow: User;
    isLoading = true;
    dataSource: MatTableDataSource<User> = new MatTableDataSource(); …

我有一个表，其中数据正在填充。每行都有一个编辑链接。我只想在单击编辑链接时编辑特定行。现在它的'显示所有行的编辑选项。

我还想在单击编辑时在输入框中显示文本。

这是我的代码。

<tr *ngFor="let row of backendData.report"  class="hover-highlight">

          <td class="benchmark_name">
             {{row.name}}
          </td>
          <td>
            {{row.value}}
          </td>
          <td>
            {{row.description}}
          </td>
          <td>
              <button *ngIf="enableEdit" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()">Cancel</button>
              <button *ngIf="enableEdit" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit">Save</button>
              <a class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEdit = true">
          <i class="fa fa-pencil" uib-tooltip="Edit" tooltip-trigger="mouseenter" tooltip-append-to-body="true" tooltip-placement="left"></i>
        </a>
          </td>
          <td>

          </td>
        </tr>

我当前的输出看起来像这样

我正在处理 2 个项目，并在我的机器上为新项目安装了 Angular 8。但是，我在现有项目中使用 Angular 5。我得到431请求头字段太大错误在我Angular5项目我安装角8.之后我怎么能在我的当前项目解决这个错误？

谢谢