标签: 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 Material V6 的应用程序。我想在材料组件文本框中列出带有标志的国际电话号码。我在互联网上搜索并找到了一个 npm 模块，但它使用的是引导文本组件。我添加了一个截图来看看它。Bootstrap 不同于 angular material 文本框组件。

现在它是：

角材料组件：

示例代码：

<mat-form-field color="warn" class="form-field-width">
 <int-phone-prefix matInput [locale]="'es'"></int-phone-prefix>
</mat-form-field>

错误：

ERROR 错误：mat-form-field 必须包含一个 MatFormFieldControl。

请给我你的建议。提前致谢。

当应用程序在浏览器中加载时，它会发出以下警告。所以无法为 prod ( ng build --aot --prod)创建构建

    It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>'; …

我尝试强制 jHipster 生成的 Angular 5 项目中的日期选择器使用波兰语语言环境，一周和几个月。据我了解有关文档：

https://ng-bootstrap.github.io/#/components/datepicker/examples#i18n

它应该使用默认设置，即：

共享-common.module.ts

...
import { registerLocaleData } from '@angular/common';
import locale from '@angular/common/locales/pl';
...

providers: [
    ...
    {
        provide: LOCALE_ID,
        useValue: 'pl'
    },
],
...
export class TestSharedCommonModule {
    constructor() {
        registerLocaleData(locale);
    }
}

用法

<input id="field_testDate" type="text" class="form-control" name="testDate" 
ngbDatepicker  #testDateDp="ngbDatepicker" [(ngModel)]="tester.testDate"
            required/>

不幸的是它不起作用，我也尝试了不同的方法，例如：

https://angular.io/api/core/LOCALE_ID

或者

https://github.com/NativeScript/nativescript-angular/issues/1147 - 我在这里复制了语言环境文件

你有什么想法可能是错的吗？

更新

我最终是这样解决的：

日期选择器-i18n.ts

import { Inject, Injectable, LOCALE_ID } from '@angular/core';
import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
    en: …

在有角度的小吃店中居中文本的正确方法是什么？

我试过这个，这不起作用：

let config = new MatSnackBarConfig();
config.panelClass = 'center';
this.snackBar.open(message, undefined, config);

然后在一些 css 文件中（在同一个组件中，或者在全局文件中）：

.center {
   justify-content: center;
}

我是 angular 5 的新手，所以我需要制作一个带有全角输入的表单，并且我希望每个输入都占用其容器的整个宽度，但是，它只占用它的一半。

这是我得到的

我正在使用有角度的材料，这是我的代码：

<mat-grid-tile class="add-product-content" [rowspan]="4">
    <form [formGroup]="addProductGroup" class="form-add-product" (ngSubmit)="sendDataProduct()">
        <mat-accordion >
            <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" >
              <mat-expansion-panel-header>
                <mat-panel-title>Personal data</mat-panel-title>
              </mat-expansion-panel-header>
              <div class="input-container">
                  <div class="flex-item">
                      <mat-form-field>
                          <input matInput placeholder="First name">
                      </mat-form-field>
                  </div>
                  <div class="flex-item">
                      <mat-form-field>
                        <input matInput type="number" min="1" placeholder="Age">
                      </mat-form-field>
                  </div>
              </div>
              <mat-action-row>
                  <button mat-button color="primary" (click)="nextStep()">Next</button>
              </mat-action-row>
           </mat-expansion-panel>

           <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" >
              <mat-expansion-panel-header>
                  <mat-panel-title>Personal data</mat-panel-title>
              </mat-expansion-panel-header>

              <mat-form-field>
                  <input matInput placeholder="First name">
              </mat-form-field>
              <mat-form-field>
                  <input matInput type="number" min="1" placeholder="Age">
              </mat-form-field>
              <mat-action-row>
                  <button …

我有一个小问题，我不知道该怎么做。我只是在学习 Angular/Typescript，我不知道如何删除一些 DOM 元素。我有一些自动生成的内容，具有特定的 CSS 类。不幸的是，这些对象是在其他地方生成的，我无法以任何方式配置它们，因此我无法在该内容上添加任何 ngIf 或其他任何内容，这将简化我的工作......我只需要使用它们。我想要实现的是这样的（jQuery 版本）：

$("#button").click(function() {
    $('.fc-oss').toggle();
 });

我有一个开关，我想给它附加一个事件，当它被激活时，它会从视图中隐藏/显示具有该特定类型的所有元素。我试图在没有 jQuery 的情况下以 angular 实现这一点，但收效甚微。关于我如何能够实现这一目标的任何想法？

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

滑块的 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;
 }

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