标签: angular5

是否可以注入作为子 svg 元素的动态组件？

例如，我有一个主要组件 (CanvasComponent) ，它的模板是这样的

<svg width="400" height="400">
 <ng-template appCanvasAnchor></ng-template>
</svg>

该 ng-template 是用于根据https://angular.io/guide/dynamic-component-loader动态注入组件的锚点

动态（SquareComponent）有这个模板

<svg:rect width="100" height="100" style="fill:red" />

现在，由于动态组件添加到 DOM 的方式，当我的 Square 组件添加到 DOM 时，它将包含在 div 元素中，如下所示。

<svg width="400" height="400">
  <div app-square>
   <rect width="100" height="100" style="fill:red" />
 </div>
</svg>

理论上，一切都工作得很好，除了这是 SVG，因此我的方块不会渲染，因为它有未知的标记（div）。这里的问题是，我是否可以以某种方式改变注入器使用的元素，以便它不使用 div，而是使用 svg 知道像 g 这样的元素？

我正在使用Angular更新一个旧网站,我必须满足的一个要求是所有路由都应该保持原样(出于搜索引擎优化的目的).

很多老网站的路线完成以斜杠(像/my/route/),其中一些完成了.html,像/my/route.html.

问题是routerLink删除了每个路由中的最后一个斜线(斜线是我的路线/my/route).

如何routerLink保持尾随斜线？

这里可以看到一个很好的例子:AngularTrailingSlash.

构建angular5应用程序.该应用程序需要一些备用布局.

我的方法是处理主app模块路由文件中的高级路由.所述文件将路由映射到模块.对于非必要的速度驱动页面,模块将延迟加载,而不是为速度关键页面延迟加载:

app-layout-router.module.ts 文件:

import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
import {PublicLayoutModule} from '@modules/layouts/public/public-layout.module';
import {AuthenticatedLayoutModule} from '@modules/layouts/authenticated/authenticated-layout.module';

const routes: Routes = [{
    path: '',
    loadChildren: () => PublicLayoutModule,
},{
    path: 'dashboard',
    loadChildren: () => AuthenticatedLayoutModule,
}];

@NgModule({
    imports: [RouterModule.forRoot(
        routes,
        {
            useHash: false,
            preloadingStrategy: PreloadAllModules
        }
    )],
    exports: [RouterModule],
})

export class AppLayoutRouter {
}

不在仪表板下的所有路线都将根据SEO原因进行预渲染.但是,在经过身份验证的布局中,我可以选择通过延迟加载后续模块来中断应用程序.例如,这是经过身份验证的模块路由器文件的内容:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthenticatedLayoutComponent} from './authenticated-layout.component';

const routes: Routes = [{
    path: …

我正在从事基于角度的项目。我正在使用数据表来显示数据。当我尝试在表上进行一些修改时，出现以下错误。

DataTables警告：表ID = DataTables_Table_0-无法重新初始化DataTable。有关此错误的更多信息，请参见http://datatables.net/tn/3

我想在（角度 5）中制作一个这样的可观察对象。如何responseType在 Angular 6 中声明？

Angular 5 代码：

public ExportSomeThing(
        ano: number
    ): Observable<IDownloadArquivo> {
        let q = this.http
            .get(this.apiUrl + ano + '/pordia/excel', {
                responseType: ResponseContentType.Blob  // <<<-- This code
            }).map((res) => { 

我的角度 6 代码：

public MyExport(
    ano: number
  ): Observable<IXpto> {
    let q = this.http
      .get( this.api_rul + ano + '/some_path/', {
        responseType: "ResponseContentType.Blob"  // <<<--- error here !!!
      }).map((res) => {

错误是：

[ts]
Argument of type '{ responseType: "ResponseContentType.Blob"; }' is not assignable to …

我找到了这篇文章，但它不能解决我的问题。我无法验证禁用 FormControls 的简单表单。我确实在这里做了一个 stackblitz 示例，请查看我的代码并验证如果名称控件被禁用，则无法验证它的值。

闪电战代码

先感谢您。

我在 Angular 工作，在那里 -

• 我正在尝试根据父组件中的值更改更新子组件中的值

  （因为值是从其他组件动态传到父组件的）。

我是如何尝试的

• 我尝试使用 @Input 装饰器将数据从父组件传递到子组件

• 使用 @Input 值仅在组件加载时传递一次，而后者不传递值

我在下面分享我的代码

父组件

.html

<app-banner [tournamentType]='tournamentType'></app-banner>

.ts

子组件

.ts 文件

import { Component, OnInit , Input } from '@angular/core';
import { ServicesService } from '../service/services.service';

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

  @Input() tournamentType;

  sportsType : any = 1;



  constructor(private rest : ServicesService) { }

  ngOnInit() {
    console.log("this. is banner page" + this.tournamentType);
    alert('hello');

    this.loadDataFromApi(1);
  }

  loadDataFromApi(sportsType) {

     this.rest.getbanner(this.sportsType).then(res => …

我有一个滑块，其中是动态创建的项目 - 这些是子组件。

滑块的 ng-container 父模板：

<div id="slider-wrapper">
    <ng-container appSliderForm *ngFor="let question of questionsInSlider"
                          [questionTest]="question" (onRemove)="removeQuestion($event)">
    </ng-container>
</div>

这些子组件由 appSliderForm 指令创建：

@Directive({
  selector: '[appSliderForm]'
})
export class FormSliderDirective implements OnInit {

  @Input()
  questionTest: QuestionInSlider;

  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory<TestQuestionInSliderComponent>(TestQuestionInSliderComponent);
    const component = this.container.createComponent(factory);
    component.instance.questionTest = this.questionTest;
    component.instance.ref = component;
  }

}

在我的子组件中，我有一个删除功能，用于将自身从滑块中删除。

@Component({
  selector: 'app-test-question-in-slider',
  templateUrl: './test-question-in-slider.component.html',
  styleUrls: ['./test-question-in-slider.component.less']
})
export class TestQuestionInSliderComponent {

  questionTest: QuestionInSlider;

  ref: any;

  @Output() …

从 Api，我得到 countryName 和代码如下

例如：-

  countryName        code
  -----------------------
  India              IND
  United States      USA
  Aruba              ABW

我想使用 ngSelect 下拉列表并希望在下拉列表中显示 countryName (code) 之类的值。

例如：印度（IND）

问题：-我想连接countryName和code。并希望根据countryName 和 code过滤下拉值。下面是我试过的代码。但它不能正常工作

组件.html

  <ng-select [items]="countries" bindLabel="description" bindValue="code"
           clearAllText="Clear" formControlName="countryCode"
          [searchFn]="customSearchFn">
      <ng-template ng-label-tmp let-item="item">
          <span >{{ item.countryName + ' (' + item.code + ')' }}</span>
      </ng-template>
      <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
           <span >{{ item.countryName + ' (' + item.code + ')' }}</span>
      </ng-template>
   </ng-select>

组件.ts

getCountry() {
this.lookupService.getCountry().subscribe(
  data => { …

我想在 ng-select 下拉列表中合并两个 API 字段“代码和名称”。例如：-

  Code       : MI

  name       : MI 3sPrime

 Format      : MI - MI 3sPrime

我使用以下代码进行下拉

组件.html

<ng-select [items]="products" bindLabel="code" bindValue="id"
                placeholder="Select Goods Receipt" clearAllText="Clear" formControlName="productId" [searchFn]="customSearchFn">

                  <ng-template ng-label-tmp let-item="item">
                    <span [ngOptionHighlight]="search">{{ item.code }} - {{ item.name }}</span>
                  </ng-template>

                  <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
                    <span [ngOptionHighlight]="search">{{ item.code }} - {{ item.name }}</span>
                  </ng-template>

</ng-select>

组件.ts

  customSearchFn(term: string, item: any) {
    term = term.toLocaleLowerCase();
    return item.code.toLocaleLowerCase().indexOf(term) > -1 || 
    item.name.toLocaleLowerCase().indexOf(term) > -1;
 }

搜索中：搜索时正在获取代码和名称。但我想搜索代码、名称和给定格式（代码 - …