标签: angular-components

我想在 Angular 5 中创建一个自定义选择输入控件。我有一个实现 SelectControlValueAccessor 的组件。当我实现如下所示的课程时。它在代码注释中给出了错误。

import { Component, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
import {  SelectControlValueAccessor } from '@angular/forms';
import { SELECT_VALUE_ACCESSOR } from '@angular/forms/src/directives/select_control_value_accessor';

@Component({    
    selector: 'select-input',
    template: ` `,
    providers: [
        {   
          provide: SELECT_VALUE_ACCESSOR,
            useExisting: forwardRef(() => SelectInputComponent),
            multi: true
        }
    ]
})

/*
[ts]
Class 'SelectInputComponent' incorrectly implements class 'SelectControlValueAccessor'. Did you mean to extend 'SelectControlValueAccessor' and inherit its members as a subclass?
  Property '_renderer' is missing in type 'SelectInputComponent'.
class SelectInputComponent
*/
export …

DropdownComponent我正在尝试从to发出值TaskComponent：

DropdownComponent位于NavBbrComponent( )内部AppModule并且TaskComponent属于。MainComponentHomeModule

里面DropdownComponent有select定义：

<select class="form-control minimal" id="project" name="project" [(ngModel)]="selectedProject" (change)="onChange($event.target.value)">
  <option>Project 1</option>
  <option>Project 2</option>
</select>

使用onChange发出值的方法：

onChange(event) {
    this.toTask.emit(event);
  }

值绑定在主组件中，其中是任务组件的定义

onChange(event) {
    this.toTask.emit(event);
  }

但没有任何价值TaskComponent。

斯塔克闪电战

我对 Angular 5 完全陌生，我想在应用程序打开时显示登录页面。

现在我显示 appComponent，它有工具栏和侧面导航栏。但是当用户加载应用程序时，如果登录成功，我想显示登录屏幕，那么只有用户应该允许查看主页。

如果我将我的应用程序组件作为登录组件，我无法根据用户的菜单选择在主页中加载不同的组件。

应用程序组件.html

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav class="app-sidenav">
        <mat-nav-list>
            <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
                <h2 matLine>Home</h2>
                <mat-icon matListIcon>home</mat-icon>
            </a>
            <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
                <h2 matLine>Account</h2>
                <mat-icon matListIcon>person</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Settings</h2>
                <mat-icon matListIcon>settings</mat-icon>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary" class="mat-elevation-z3">
            <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      My App
    </mat-toolbar>
    <div class="app-content">
      <router-outlet></router-outlet>  // router-outlet
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

目前，当我运行应用程序时，正在加载此页面。我想显示全屏登录页面，而不是首先显示主页。

const  routings: Routes = [
    {path:'',redirectTo:'/app-root',pathMatch:'full'},
    {path:'home',component:HomeComponent},
    {path:'account',component:AccountComponent},
    {path:'settings',component:SettingsComponent},
    {path:'**',redirectTo:'/app-root',pathMatch:'full'},
];

目前，当 url 为 ' ' …

如何使用组件作为 Angular 中另一个组件的输入数据？

例如：

我想要构建表格组件AppTableComponent：

<app-table [dataSource]="dataSource" [columns]="columns">\n  <ng-container tableColumnDef="actions">\n    <a routerLink="/model/edit/{{item.id}}" routerLinkActive="active">Edit</a>\n    <a routerLink="/model/delete/{{item.id}}" routerLinkActive="active">Delete</a>\n  </ng-container>\n  <ng-container tableColumnDef="isActive">\n    <div [ngClass]="{cercl:true, \'is-active\':item.is_active}">&nbsp;</div>\n  </ng-container>\n</app-table>\n

dataSource是数据数组之和，如Model[]orPerson[]或Car[]。columns是一个字符串数组，如[\'id\', \'isActive\', \'name\', \'actions\']. 它应该包含数据源行属性名称或附加列名称。

我知道如何使用ng-content，但它不是相同的情况。不同之处在于我应该在多个地方使用部分内容。也许我应该使用 ng-contet，但我不知道\xe2\x80\x99t 是什么。

我确信我的目标是可能的，因为 Angular 材质表的工作原理如下：

<mat-table #table [dataSource]="dataSource">\n    <ng-container matColumnDef="position"></ng-container>\n    <ng-container matColumnDef="weight"></ng-container>\n</mat-table>\n

请不要建议我使用 Angular 材料表组件。我不需要桌子。我只是想学点新东西。

我将非常感谢有关该主题的任何信息或文章！

编辑：我的解决方案是重新思考我想要实现的目标，而不是尝试创建一个从不同来源获取参数和数据然后在父级中多次调用的组件，我制作了一个仅使用网格的组件布局（材质网格），然后它包含所有模板标记和 API 调用，并在父级中调用一次。我认为这更容易维护，但不能在另一个仪表板中重用，除非我扩展它并在模板中使用 *ngIf。

我有一个仪表板，它将显示来自组件中 API 的不同数据列表，否则每个实例的数据列表都是相同的。

我能够创建该组件并在父级中使用它，并且可以提供基本的替代方案，例如图标旁边的标题文本，但我无法弄清楚如何为每个实例引用来自 API 的不同数据集。当我调用它时的组件。

如何创建一个可重用组件来接受与其他实例不同的数据并使用模板显示它？

我找到了一些关于如何重用组件的教程，但这不是我需要的。我考虑在模板中使用多个来*ngIf测试和显示/隐藏显示哪组数据，从而拥有一个具有多个变体的大型组件，但这看起来很混乱，并且具有多种用途将很难维护。

如您所见，我可以更改标题文本和图标等简单的内容，但数据需要更复杂的结构，每个实例的结构都不相同。

可重用的组件模板

<mat-card class="panel">
    <header class="subheader">
      <h2><mat-icon color="primary">{{iconRef}}</mat-icon> {{headerRef}}</h2>
      <hr class="header">
    </header>

    // a table or list of data here, changes for each use. 
    // Will use for example {{ data.activity }} from one endpoint
    // or {{ data2.location }} from some other endpoint

  </mat-card>

在父级中使用如下：

 <app-resusable-dash-one [headerRef]="' Prosjekt'" [iconRef]="'assignment'"></app-resusable-dash-one>

可重用组件.ts：

export class ResusableDashOneComponent implements OnInit {

  @Input() iconRef: string;
  @Input() headerRef: string;

  dataRef: any[] = …

我在一个项目中使用 Angular 8，并且在启动动态组件时遇到问题，因为 ngOnInit 没有被调用。我构建了一个名为 PlaceholderDirective 的指令，如下所示：

@Directive({
  selector: '[appPlaceholder]'
})
export class PlaceholderDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}

并在 ng-template 上使用该指令：

<ng-template appPlaceholder></ng-template>

保存 ng-template 所在 HTML 的组件启动动态组件，如下所示：

@ViewChild(PlaceholderDirective, {static: false}) private placeholder: PlaceholderDirective;
...
constructor(private componentResolver: ComponentFactoryResolver) {}
...
public launchSensorEditComponent(id: number) {
    const componentFactory = this.componentResolver.resolveComponentFactory(SensorEditComponent);
    const hostViewContainerRef = this.placeholder.viewContainerRef;
    hostViewContainerRef.clear();
    const sensorEditComponentRef = hostViewContainerRef.createComponent(componentFactory);
    sensorEditComponentRef.instance.sensorId = id;
}

实际的动态组件非常简单，它注册在AppModule的entryComponents部分中。我已将其范围缩小到最低限度，以便了解问题所在：

@Component({
  selector: 'app-sensor-edit',
  templateUrl: './sensor-edit.component.html',
  styleUrls: ['./sensor-edit.component.css']
})
export class SensorEditComponent implements OnInit {
  @Input() sensorId: …

在另一个组件中注入组件来访问注入组件中的函数或属性是否正确？
注意：这些组件都不是另一个组件的子组件

import { UsersComponent } from './../users/users.component';

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

  constructor(users:UsersComponent){
    users.getAllUsers()
  }
}

如何将此 javascript 和 HTML 代码添加到 Angular 项目中？ 我已将 func.js 放在我的 Angular 项目的 src 文件夹中以及我尝试导入和使用 ngAfterViewInit() 来加载和使用 javascript 函数的 app.component.ts 文件中

这些是我尝试添加到 Angular Web 应用程序中的 javascript 和 html 文件：

函数.js

const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
    questionnaire: 'Questionnaire',
    valueset: 'ValueSet'
}

//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var …

我正在使用 Angular 设计我的第一个应用程序，并且正在阅读状态管理，这时我想到了以下场景，对此我找不到答案

我有一个组件 A 可以更改其变量 v1。该应用程序的状态被保存在一个服务中，所有组件都使用该服务来获取更新。现在，当我们使用组件 A 的多个实例时，变量 V1 对于不同的实例可能具有不同的值。那么状态管理是如何工作的呢？如何分别从状态存储库读取 V1 并将其写入状态存储库。我们不需要单独存储每个实例的数据吗？如何才能做到这一点？

提前致谢。

我有一个带有 SVG 元素的组件，我试图将该 SVG 的各个部分分成不同的组件。嵌套组件需要从父组件动态创建，这是因为我正在从 json 文件构建整个 SVG 图形，该文件确定需要添加哪些嵌套组件（SVG 嵌套形状）。

为了动态创建组件，我使用 ComponentFactoryResolver 和 @angular/core 中的 ViewContainerRef

@Component({
selector: 'skick-player',
 templateUrl: './player.component.html',
 styleUrls: ['./player.component.scss'],
})
export class PlayerComponent implements OnInit, AfterViewInit {

@ViewChild('svgContainer', { read: ViewContainerRef }) container;

constructor( private resolver: ComponentFactoryResolver) {}

  performFrame() {

      ....
     //Add nested component
      const factory = this.resolver.resolveComponentFactory(
        BackDropItemComponent
      );
      const componentRef = this.container.createComponent(factory);
      componentRef.instance.imagePath = objectUrl;
    }
  }
});

}

问题是 Angular 将嵌套组件包裹在 div 中：

<div _nghost-qon-c42="" skick-back-drop-item="" class="ng-star-inserted">

因此，由于创建了特殊的元素标签，它不会被渲染。如果删除该 div 元素，它将正确渲染嵌套的 SVG。

我知道我可以将嵌套组件渲染为指令并且它会起作用，如下所示：

<svg> …