标签: angular5

我正在使用 Angular 5，反应形式方法。

我在 Angular Material 对话框中有一个表单，用于输入和编辑数据。我的构造函数如下所示：

constructor(public formBuilder: FormBuilder,
    public documentService: DocumentService, 
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.createForm();
    if (this.data.edit) {
        this.setValues();
    }
    this.setTitles();
}

该createForm调用创建了我进行异步验证的反应式表单：

createForm() {
    this.documentForm = this.formBuilder.group({
        ...
        documentNumber: new FormControl('',
                {
                    updateOn: 'blur',
                    validators: [Validators.required],
                    asyncValidators: [this.checkDocumentNumber.bind(this)]
                }),

        ...
    });
}

如果对话框处于“编辑”模式，则setValues调用会修补需要编辑的数据：

setValue() {
    this.form.patchData({
        ...
        documentNumber: this.data.document.documentNumber
        ...
    });
}

该setTitles调用设置对话框标题。

该checkDocumentNumber调用boolean从服务器获取一个值：

checkDocumentNumber(control: AbstractControl): Observable<ValidationErrors | null> {
    const formValue = this.form.value;
    return …

我更新到 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”。
这是它的外观：


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

谢谢！

我有一个带有打字稿文件 (.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": …

当我创建一个 SeleccionServicioComponentMD 模态窗口（子）时，我是这样使用的：https : //valor-software.com/ngx-bootstrap/#/modals#service-component

里面的孩子有按钮。当它被点击时：
1) 父母应该关闭这个孩子。
2）父级应该显示另一个模态。

我的尝试：子项（模态）向其父项发出事件，但是：
3）父项<app-seleccion-servicio-component>在其 HTML 中没有包含标记，因为其子项是动态创建的。那么，父级在哪里侦听其子级发出的这个事件？

预期的结果是：
4）点击子组件内部的按钮。
5) 父级关闭这个子级（模态窗口）。
6) 父级显示另一个模态窗口。

7）我被困在这一点上。我不知道该怎么做才能让父级侦听其父级发出的没有<app-seleccion-servicio-component>标记的事件。

Angular5 服务器端渲染（（未知 url）的 Http 失败响应：0 未知错误）。

我相信上述错误与 CORS 有关。但是没有 SSR 的 angular5 CORS 工作正常。

当我将 Api 更改为子域时，会特别发生这种情况

Laravel API：http://api.localhost:80

节点快递：http://localhost:3000

下面是我为 Laravel PHP api 添加的标题。

        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
        header('Access-Control-Allow-Headers: Origin, Content-Type,Accept, X-Auth-Token ,App-Auth,X-XSRF-TOKEN,Authorization');
        header('Access-Control-Max-Age: 86400');

使用 Node 与 Laravel PHP 通信时，出现以下错误

Uncaught (in promise): [object Object]
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:824:31)
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:795:17)
    at D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:873:17
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:425:31)
    at Object.onInvokeTask (D:\ng\app-root\node_modules\@angular\core\bundles\core.umd.js:4783:33)
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:424:36)
    at Zone.runTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:192:47)
    at drainMicroTaskQueue (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:602:35)
    at ZoneTask.invokeTask …

我正在使用以下代理配置构建 angular 2 应用程序。

代理配置文件

{ 
 "/": {
  "target": "http://localhost:6060",
  "secure": false,
  "changeOrigin": true,
  "logLevel": "debug" 
}}

我使用 spring boot 应用程序作为我的后端，它在端口 6060 上运行

我的包json的构建脚本如下

包.json

"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}

当我使用npm start 时，应用程序工作正常。所有后端请求都发送到http://localhost:6060

然后我使用构建生产版本

ng build --prod --proxy-config proxy.conf.json

并将生成的代码部署到 HTTP 服务器（apache 服务器）。然后我访问http://localhost/应用程序统计信息。但是当我尝试发出请求时，这些请求指向http://localhost/ ...而不是http://localhost:6060

我试图找到一些解决方案，但没有这些解决方案。请给我一些帮助。

谢谢

我正在使用Angular Material中的MatTable组件来创建动态数据表.

我需要得到一行的当前位置.我可以很容易地获得用户点击的行但我无法知道它在列表中的当前位置(这取决于排序/过滤/分页).

任何的想法？

我有一个带有两个应用程序的Angular CLI项目。这两个应用程序是相同的，但是一个应用程序包含构建中的所有文件，另一个则需要排除模块。

Angular CLI版本：1.7.4 Angular版本：5.2.10

我将两个应用程序添加到angular-cli.json文件中，每个应用程序都有一个单独的ts-config文件。

  "apps": [
    {
      "name": "app",   <---- first app
      "root": "src",
      "outDir": "/wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",       <----first TS config
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "admin",   <---- second app
      "root": "src",
      "outDir": "/wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": …