标签: angular7

我只是想在Angular 7 DragDropModulefrom 的帮助下创建拖放组件@angular/cdk/drag-drop。但是我总是收到如下错误。

HomeComponent.html:14 ERROR TypeError: Cannot read property 'length' of undefined
    at moveItemInArray (drag-drop.es5.js:1287)
    at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.drop (home.component.ts:31)
    at Object.eval [as handleEvent] (HomeComponent.html:15)
    at handleEvent (core.js:19676)
    at callWithDebugContext (core.js:20770)
    at Object.debugHandleEvent [as handleEvent] (core.js:20473)
    at dispatchEvent (core.js:17125)
    at core.js:18615
    at SafeSubscriber.schedulerFn [as _next] (core.js:10218)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)

这是我的HomeComponent.html

<div style="display: flex;">
  <div class="container">
    <div class="row">
      <h2 style="text-align: center">Movies</h2>
      <div  cdkDropList #allmovies="cdkDropList" [cdkDropListData]="movies" [cdkDropListConnectedTo]="[towatch]"
        (cdkDropListDropped)="drop($event)">
        <app-movie *ngFor="let movie of movies" [movie]="movie" cdkDrag></app-movie>
      </div>
    </div>
  </div> …

我已将4号角代码迁移到6号角，我想知道如何在6号或7号角下面导入代码？

import { RequestOptions, ResponseContentType } from '@angular/common/http';

正在开发的应用程序托管在iframe中.

我在我的应用程序中配置了以下路由:

    const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'list'
  },
  {
    path: 'list',
    component: ListComponent,
    canActivate: [CanActivateRoute]
  },
  {
    path: 'dashboard',
    loadChildren: './modules/dashboard/dashboard.module#DashboardModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

在ListComponent,OnInit方法,我用下面的代码来获取查询字符串PARAMS:

this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log("val.state.root.firstChild.params: " + val.state.root.firstChild.params);
      }
    }); 
const firstParam: string = this.route.snapshot.queryParamMap.get('id');

这些似乎都不起作用.我申请的网址如下:

https://company.com/#/app-dev/list?id=3

QueryParamMap或者RoutesRecongnized似乎没有在url中获取查询字符串"id = 3".它总是返回null.

任何人都可以帮我如何从角度应用程序中的URL检索查询参数/查询字符串？

我在Angular Material CDK的拖放功能方面遇到了问题。我正在尝试使用嵌套的DropList，该DropList可以嵌套任意深度。无法将项目拖到DropList的第三级中。除此之外，从第一级拖动到第二级时，这些项目来回跳动。

此处的解决方法解决了从第一个级别跳转到各个级别的问题。但这不能解决将项目放入第三层的问题。

我编写了一个最小且更复杂的示例来显示问题。

码

在复杂的示例中，从DropList中删除项目无效（似乎是模型无法刷新UI的问题，所以请不要介意。我正尝试尽快对其进行修复。）复杂的示例包括更多封装的组件。简单的只是处理拖放的两个组件。简单的示例包括上述解决方法，它解决了第一级和第二级之间的跳转问题。

我希望在将简单示例中的2拖到Composite 1.1的拖放区域（在Leaf 1.1.1和Leaf 1.1.2之间）时，将把该项目拖放到Composite 1.1中。但这不会发生。此外，该项目在“ 复合1.1”框上方时会来回跳转。也许有人知道如何解决此问题...

我有一个使用angular 7的表单。我的FormGroup出现问题，并且与该FormGroup的FormControls关联的HTML输入在重置后不同步。我的输入已清除，但是我的表单控件具有预期的重置值。

我可以使用复位按钮来保持同步，该按钮不是“ reset”类型，而是绑定其onclick事件。另外，我可以通过吞下事件并进行表单重置来使语义正确的重置按钮正常工作。

但是，这对我来说在语义上是不正确的。更不用说，只要可以弄清这个同步问题，我想使用的代码的生产版本与语义正确的代码一起使用会更加方便。

出于简单性和行为隔离的原因，我改编了来自angular的文档https://angular.io/api/forms/FormControlName的代码

下面是我有问题的代码

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()" (reset)="resetToDefault()">
      <div *ngIf="first.invalid"> Name is too short.</div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>
  `,
})
export class SimpleFormGroupComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: …

我有这样定义的全局错误处理程序（清除了简化/专有信息）：

export class ErrorsHandler extends CommonBase implements ErrorHandler {
  constructor(protected loggingService: LoggingService,
              private coreService: CoreService {

    super(loggingService);
  }

  handleError(error: Error) {
    if (error && error.stack && (error.stack.indexOf(Constants.PACKAGE_NAME) >= 0)) {
      this.logSystemError(error, true);
      this.coreService.showSystemError(error, this.owner);
    }
    else {
      // Rethrow all other errors.
      throw error;
    }
  }

并且在我的模块（并且只有我的模块）中，它被注册为提供者，如下所示：

export function errorHandlerFactory(loggingService: LoggingService, coreService: CoreService) {
  return new ErrorsHandler(loggingService, coreService);
}

providers: [
    { provide: ErrorHandler, useFactory: errorHandlerFactory, deps: [LoggingService, CoreService] }
]

我的模块被其他人使用，我们一起组成了一个大型应用程序。我的问题是，即使我尝试过滤仅与我的模块/软件包相关的那些脚本，也会捕获到所有脚本错误，因为过滤是在中完成的handleError()。即使我重新抛出了与我无关的错误（在else上面），其他模块/程序包的开发人员仍在抱怨我在全球范围内捕获所有内容，并且重新抛出的错误已经失去了某些上下文/信息。

所以问题是，是否有可能以某种方式限制我的错误处理程序的范围，以仅捕获和处理源自我的模块/包的脚本错误（而完全忽略应用程序中的所有其他脚本错误）？

经过大量的搜寻之后，我唯一想到的替代方法是将try/catch其放置在任何地方，这是我想尽可能避免的方法。

我正在开发我的第一个 Angular 7 库，但是在尝试编译该库时收到此错误。

错误：错误 TS6059：文件“...environment.ts”不在“rootDir”“my-angular-library\projects\my-library\src”下。“rootDir”预计包含所有源文件。

看着我的树，我有：

-projects
  -my-library
     -src
-src
  - environments

在我的课堂上，我有以下导入：

import { environment } from "src/environments/environment";

我正在检查其他线程，他们提到了打字稿中的错误，但是我正在运行最新版本的“打字稿”：“〜3.1.1”。

其他线程提到了错误配置的 rootDir。我检查了我的项目，没有在任何配置文件中定义 rootDir。

我不需要向项目添加环境，对吗？

我正在尝试使用 Angular Material 7 中发布的拖放功能。

我使用将模板分成可重复使用的部分ngTemplateOutlet，每个选项都可以是事物\xe2\x84\xa2 或嵌套事物\xe2\x84\xa2，其中有更多子事物\xe2\x84\xa2。

嵌套事物\xe2\x84\xa2 显示为扩展面板。\n我希望所有第一级事物\xe2\x84\xa2 都可以重新排序，就像它们是一个列表一样。

（好吧，好吧，很明显这是一个带有正常和嵌套选项的可重新排序的侧导航，只是假装它不那么明显）

这是我最初编写的代码。

<div cdkDropList (cdkDropListDropped)="dropItem($event)" lockAxis="y">\n  <ng-container *ngFor="let thing of things">\n      <ng-container\n        *ngTemplateOutlet="!thing.children ? singleThing : multipleThing; context: { $implicit: thing }"\n      ></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #singleThing let-thing>\n  <div cdkDrag>\n    <ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: thing }"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #multipleOption let-thing>\n  <mat-expansion-panel cdkDrag (cdkDropListDropped)="dropItem($event)">\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <p>Nested thing title</p>\n        <span cdkDragHandle></span>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <ng-container …

我已将我们的项目升级到 Angular 7，一切正常。但是，当我执行 ngserve --aot 或使用 aot = true 构建产品版本时，出现以下运行时错误：

error: Uncaught (in promise): TypeError: Cannot read property 'hasOwnProperty' of undefined
TypeError: Cannot read property 'hasOwnProperty' of undefined
at constructTimingAst (http://localhost:4200/vendor.js:2316:15)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitAnimate (http://localhost:4200/vendor.js:2025:25)
at visitDslNode (http://localhost:4200/vendor.js:1759:28)
at http://localhost:4200/vendor.js:2003:61
at Array.map (<anonymous>)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitSequence (http://localhost:4200/vendor.js:2003:35)
at visitDslNode (http://localhost:4200/vendor.js:1755:28)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitQuery (http://localhost:4200/vendor.js:2235:25)
at visitDslNode (http://localhost:4200/vendor.js:1771:28)
at http://localhost:4200/vendor.js:2003:61

有什么想法吗。

我正在使用 Angular 5.2.11 和 Election 版本 3.0.7，并尝试使用 Electron 菜单导航到 Angular 5 组件。当我单击电子菜单时，它会导航到该页面，但我的组件仅执行构造函数，而不执行任何角度生命周期挂钩，直到我单击电子窗口。然后页面就会加载并按预期工作。

菜单.js 文件：

const { Menu } = require('electron');
const menuTemplate = [
      label: 'Maintenance',
      submenu: [
          {
              label: 'Sar Maintenance',
          }
      ];

menu = Menu.buildFromTemplate(menuTemplate);    
Menu.setApplicationMenu(menu);

exports.ApplicationMenu = menu;

索引.ts 文件：

const { app } = require('electron');
const BrowserWindow = require('electron').BrowserWindow

let ipcm = require('electron').ipcMain;
let appmenu = require('./menu.js');
let menu = appmenu.ApplicationMenu;
let mainWindow;

function createMainWindow () {
    mainWindow = new BrowserWindow({width:  800, height: 800});
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    menu.items[1].click …