标签: angular7

我正在创建一个 Angular 的 7 ModalService，它只是打开一个 Modal（StackBlitz Example）。

Modal 内容应该是打开时传递给 Modal 的 Component。

模态

export class Modal {

  protected modal: any = null;

  close() {
    this.modal.close();
  }

}

模态服务

import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ModalService {

  private componentRef: any;
  private modalContainer: any;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector) { }

  private createFormModal(component: any): Element {

    this.componentRef = this.componentFactoryResolver.resolveComponentFactory(component.component).create(this.injector);

    this.componentRef.instance.modal = this;

    this.appRef.attachView(this.componentRef.hostView);

    return (this.componentRef.hostView …

我正在尝试在我的 angular 7 项目中使用save-svg-as-png库。

但是，我无法让它发挥作用。我已经使用

npm install --save save-svg-as-png

我可以在 node_modules 下看到库。

不幸的是，该库是一个旧式的 javascript 库，我不知道我需要做什么才能在我的打字稿组件中访问它。

自述文件引用了显然存在类型定义的Typings库。但是，Typings 页面提到它在 TypeScript 2 中已被弃用，所以我没有追求这个。

显然有@types/save-svg-as-png支持原生 Angular 2+，但是当我尝试安装它时

npm install --save @types/save-svg-as-png

找不到库 ( npm ERR! code 404)。

我用谷歌搜索了更多并在 github上遇到了这个问题，有人显然已经通过将它包含在 angular-cli.js 文件中来让它与 Angular 2 一起工作，但是随着对 Angular 的更改，这个文件在版本 7 中不再存在，我不知道现在需要怎么做。

我还发现了以下关于如何将 javascript 库集成到 Angular 2+ 中的文章，但其中大部分依赖于 @types 可用（它们不是，见上文）并且只有一个简短的部分关于如何提供你自己的库typings.d.ts文件，但玩了很长一段时间后，我没有进一步。是否有更详细的解释说明如何使用这种方法？

我还在stackoverflow 上找到了这篇关于如何将基于 IIFE 的库集成到打字稿应用程序中的文章，但没有让它工作。

我已将以下行添加到我的index.html文件中 …

我在参与一个有角度的项目时遇到了这个错误。我不明白我该怎么办。任何人都可以帮助我吗？

SCRIPT5022: Template parse errors:
'mdb-navbar-brand' is not a known element:
1. If 'mdb-navbar-brand' is an Angular component, then verify that it is part of this module.
2. If 'mdb-navbar-brand' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

我正在尝试使用 Angular 7 和 CSS Grid 创建布局。我遇到的问题是router-outlet仅在第二行中占据一列。

我在这里创建了一个StackBlitz。

正如您在app.component.cssI want router-outlet(及其任何内容) to take up 中看到的grid-column: 2 / 5，截至目前，它占用了 2 / 3。

我正在努力实现的目标是可能的吗？

我有一个使用 ngFor 显示数据的表格。我需要在单击时以模态显示单个行数据。我可以通过将行作为 click 参数传递来将其记录在控制台中，但无法将其传递到模态中。

假设正在从服务中获取表数据，并且模态是与表位于同一组件文件中的模板引用。

这是创建的小提琴 https://stackblitz.com/edit/angular-xr8ud5

我使用了 angular 1.x 并且数据是通过解析传递的。我是 Angular 的新手，从未在 ngBootstrap 中工作过。

任何帮助表示赞赏。谢谢

我正在使用 ng2-chart 库为图表创建条形图。我收到以下错误ng serve：

node_modules/chartjs-plugin-datalabels/types/index.d.ts(5,16) 中的错误：错误 TS2665：扩充中的模块名称无效。模块“chart.js”解析为“/node_modules/chart.js/src/chart.js”中的无类型模块，无法扩充。

我想要一些条形图上的数据标签。

所以我在组件中添加了'chartjs-plugin-datalabels'。

当我在代码中添加以下行时，会发生此错误。

import * as pluginDataLabels from 'chartjs-plugin-datalabels';

export class AnalysisComponent implements OnInit {
    public barChartPlugins = [pluginDataLabels];
}

库的版本

"chart.js": "^2.7.3",
"ng2-charts": "^1.6.0",
"chartjs-plugin-datalabels": "^0.6.0",

任何帮助将不胜感激。

我有以下表格，其中列出了问题并有一个答案字段。api 循环列出的问题，所有问题都需要具有相同的字段名称。一切正常，问题是我无法提交除最后一个之外的所有表单值。有没有办法为多个字段使用表单控件名称。

move-maker-add-component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { ApiService } from 'src/app/shared/services/api.service';
import { AuthService } from "src/app/shared/services/auth.service";
import { Router } from '@angular/router';
@Component({
  selector: 'app-move-makers-add',
  templateUrl: './move-makers-add.component.html',
  styleUrls: ['./move-makers-add.component.scss']
})
export class MoveMakersAddComponent implements OnInit {
moveMakerForm: FormGroup;
moveMakerId:any;
moveMakers:any='';
answer:any;
id:string='';


  constructor(public authService: AuthService,private router: Router, private api: ApiService, private formBuilder: FormBuilder) { }

  ngOnInit() {
  this.getMoveMaker();  
  this.moveMakerForm = this.formBuilder.group({
    'moveMakerId' : …

我尝试在我的离子项目中导入存储模块。但是当我添加提供者存储时，错误发生了变化。错误变为“无法解决所有存储：(?)”我该如何解决此错误？你能帮我吗？我在下面写了我的代码。我看这个视频：https : //www.youtube.com/watch?v=h_IhS8QQjUA&list=PLNFwX8PVq5q7S-p_7zO99xdauhDsnMPw0&index=17&t=0s

应用模块 ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {Storage} from '@ionic/storage';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule  } from '@ionic/storage';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,IonicStorageModule.forRoot()],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: …

将 Angular 应用程序部署到Heroku时，出现错误

错误 TS2349：无法调用类型缺少调用签名的表达式。输入 '((...items: number[]) => number) | ((...items: ChartPoint[]) => number)' 没有兼容的调用签名。

但是我在这个错误显示的组件中没有这种类型的代码。所以这似乎 chart.js 类型缺少问题或@types/chart.js版本不匹配。

正在使用以下版本

"chart.js": "^2.8.0",
"@types/chart.js": "^2.7.52"

更新

<div style="display: block;">
    <canvas #myChart baseChart 
            [datasets]="lineChartData" 
            [labels]="lineChartLabels" 
            [options]="lineChartOptions"
            [colors]="lineChartColors" 
            [legend]="lineChartLegend" 
            [chartType]="lineChartType"
          (chartClick)="onChartClick($event)">
    </canvas>
</div>

在 .ts 文件中

this.lineChartData[0].data = [0]
this.lineChartData[0].data = [1]
this.lineChartData[0].data = [2]

我尝试了三种方法。

第一个：index.html

<base href="/customer">

第二个：app.module.ts

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/customer'}]
})

第三个：app-routing.module.ts

const routes: Routes = [
  { path: "", redirectTo: "/customer", pathMatch: "full" },
  {
    path: "customer",
    component: CustomerComponent,
    data: { animation: "HomePage" }
  }
];

以上所有方法都适用于 URL 路由，我得到了所需的 URL。

http://localhost:4200/客户

但是，静态文件（js 和图像）仍在使用基本路径“ http://localhost:4200/ ”加载。我需要它像http://localhost:4200/customer/main.js 一样。

因此，出于某些安全验证原因，我试图将其设为http://localhost:4200/customer/main.js而不是http://localhost:4200/main.js。

同样可以在下面的屏幕截图中看到。