标签: angular5

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

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

设置Vary: Origin没有帮助。

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

我更新到 Angular 5.0.2，它需要 Typescript 2.4.2。我现在在尝试编译时收到此错误：

TypeError: Class extends value undefined is not a constructor or null

从我的研究来看，这似乎是一个循环依赖问题，但我不确定如何解决它。我有大量扩展基本模型的模型。例如（在伪代码中）：

在 base-model.ts

export class BaseModel {
    public name: string;
}

在 foo-model.ts

import {BaseModel} from './base-model';

export class FooModel extends BaseModel {}

在 bar-model.ts

import {BaseModel} from './base-model';
import {FooModel} from './foo-model';

export class BarModel extends BaseModel {
    public foo: FooModel;
}

在 index.ts

export * from './base-model';
export * from './foo-model';
export * from './bar-model';

在 bar.component.ts

import {BarModel} from './index';

@Component({}) …

我在项目中的模态组件上使用了角度动画（淡入、淡出）。
当单击不同组件上其他位置的按钮时，模态设置为打开（使用模态服务）。
承载模态组件的组件中的动画代码：

animations: [
    trigger('modalVisibilityChanged', [
      state(
       'shown',
        style({
          opacity: 1,
          visibility: 'visible'
        })
      ),
      state(
        'hidden',
         style({
          opacity: 0,
          visibility: 'hidden'
        })
      ),
      transition('shown => hidden', animate('500ms ease-in')),
      transition('hidden => shown', animate('500ms ease-out'))
    ])]

和 html：

<app-modal [@modalVisibilityChanged]="visibility"></app-modal>

在我将模态内容设置为动态加载并插入模态组件（在模态的组件 html 中使用 ng-template）之前，此动画效果很好。

之后动画不再起作用（点击按钮时相关的 css 属性不会改变）并且模式组件 div 在使用谷歌浏览器检查时获得类“ng-animate-queued”。
这是它的外观：


谁能帮我解决这个问题，或者分享一下原因是什么？

谢谢！

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

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

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

更新：我正在使用 TypeScript

谢谢

我有一个带有打字稿文件 (.ts) 的共享文件夹（符号链接），我希望它们被构建并随后添加到我的 dist 文件夹中。

如果我将每个文件名都放在“angular-cli.json”中的脚本部分，如下所示：

... 
"scripts": [
        "app/shared/Scripts.Shared/IConstructableFromString.ts",
        "app/shared/Scripts.Shared/User.ts"
      ],
...

有用。但是当我尝试像这样添加完整的文件夹时：

... 
"scripts": [
        "app/shared/Scripts.Shared/**"
      ],
...

出现以下错误：

Error: ENOENT: no such file or directory, open 'C:\project\src\app\shared\Scripts.Shared\**'

我的问题：

是否可以添加一个完整的文件夹（例如使用通配符“*”）或者是否有其他解决方案？

提前致谢，丹尼尔

我们最近刚刚将我们的应用程序 Angular 版本v5更新为新的更新表单支持的一部分，ngFormOptions以配置form elements某些事件的验证。以下是我们所做的：

<form class="example-form" autocomplete="off" [ngFormOptions]="{updateOn:'submit'}" [formGroup]="testform">

</form>

但它抛出以下错误

无法绑定到“ngFormOptions”，因为它不是“form”的已知属性

在更新后应用程序的依赖项下方。

包.json

"dependencies": {
    "@angular/animations": "5.0.0-rc.5",
    "@angular/common": "5.0.0-rc.5",
    "@angular/compiler": "5.0.0-rc.5",
    "@angular/core": "5.0.0-rc.5",
    "@angular/forms": "5.0.0-rc.5",
    "@angular/http": "5.0.0-rc.5",
    "@angular/platform-browser": "5.0.0-rc.5",
    "@angular/platform-browser-dynamic": "5.0.0-rc.5",
    "@angular/router": "5.0.0-rc.5",
    "core-js": "^2.4.1",
    "ng2-accordion": "0.0.15",
    "ngx-bootstrap": "^1.9.3",
    "ngx-popover": "0.0.16",
    "rxjs": "^5.5.2",
    "typescript": "2.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "^1.5.4",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": …

我正在使用 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。解决方案是否改变此行为对我来说并不重要。）

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

我在 Angular5 应用程序中到处使用 Angular-Material 库，但我不希望在我的标记中使用它的指令/组件/类名称，我更喜欢与外部库保持不可知的关系。但是，我尝试做这样的事情：

import { Directive, 
         ElementRef, 
         Renderer, 
         Renderer2 }  from "@angular/core";

import { MatButton }  from "@angular/material";
import { OnInit }     from "@angular/core";
import { Platform}    from "@angular/cdk/platform";
import {FocusMonitor} from "@angular/cdk/a11y";

@Directive({
  selector: '[my-button]'
})
export class MyButtonDirective extends MatButton {

  ngOnInit(): void {

  }

  constructor(renderer: Renderer2, elementRef: ElementRef, _platform: Platform, _focusMonitor: FocusMonitor) {
    super(renderer, elementRef, _platform, _focusMonitor);

  }
}

但是当我应用该my-button属性时，它似乎没有任何效果。即使console.logs从指令内部构造函数/onInit 也不会被打印。我不太确定我做错了什么，因为我以前从未在 Angular 中使用过指令。

感谢 这篇非常有见地的文章，我能够使用从端点获取的动态模板动态创建组件，但是这些组件是使用 RuntimeCompiler 在运行时编译的，在使用 AoT 编译（又称生产时）时会禁用该编译器。

有人知道适用于 AoT 的类似解决方案吗？

我的要求是：

• 在运行时获取组件的模板
• 将来自端点的一些数据存储到组件的属性中
• 让 Angular 解析模板，尤其是在包含来自端点的数据的属性上工作的包含的绑定