标签: angular-components

我有一些我希望作为组件显示的HTML,因为我没有操纵DOM.

作为一个指令,它工作正常,但作为一个组件,它没有.我以前做过组件没有问题,只是看不出这里的问题.如果我在组件代码中注释,并且指令输出,则它不起作用.

知道我做错了什么吗？

(function() {
"use strict";

angular
    .module('x.y.z')


    // .component('triangularStatus', {
    //     bindings: {
    //         value: '=',
    //         dimension: '=?'
    //     },
    //     templateUrl: '/path/to/triangular-status.html',
    //     controller: TriangularStatusController,
    //     controllerAs: 'vm'
    // });


    .directive('triangularStatus', triangularStatus);

    function triangularStatus() {
        var directive = {
            scope: {
                value: '=',
                dimension: '=?'
            },
            replace: true,
            templateUrl: '/path/to/triangular-status.html',
            controller: TriangularStatusController,
            controllerAs: 'vm',
        };
        return directive;
    }



    TriangularStatusController.$inject = [];
    function TriangularStatusController() {
        var vm = this;
    }
})();

如何在Angular 2中重新加载相同的组件？

这是我的代码如下:

import { Component, OnInit, ElementRef, Renderer } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { productModel } from '../_models/index';
import { categoryListService } from '../_services/index';

@Component({
  selector: 'app-product',
  templateUrl: 'product.component.html',
  styleUrls: ['product.component.css']
})
export class productComponent implements OnInit {
  uidproduct: productModel;
  param: number;
  constructor(
    private elementRef: ElementRef,
    private route: ActivatedRoute,
    private router: Router,
    private categoryListService: categoryListService) { }

  ngOnInit() {
    this.route.params.subscribe(product => {
      console.log('logging sub product obj', product);
    });
    this.uidproduct = JSON.parse(sessionStorage.getItem('product'));
    var …

我想为不同的环境加载不同的全局CSS样式.在angular-cli.json中,它是"硬编码"到"styles.css".有没有办法加载不同的css文件 - 基于环境中定义的一些属性？

我想知道如何使用带有1.5角组件的$ formatters和$ parsers.有人可以发布一个例子.

或者是否有类似我可以使用的东西.

我正在建立一个我总是想要endDate> startDate的组件（html，css，spec.ts，ts）。我按照此链接https://material.angular.io/components/datepicker/overview进行了多个日期选择。

以下是我针对startDate和的HTML endDate：

开始日期：

<div class="start-date" fxFlex="50%" fxFlexOrder="1">
          <mat-form-field>
            <input matInput [matDatepicker]="picker1" placeholder="{{'PORTAL.STARTDATE' | translate}}" type="text" formControlName="startDate" [(ngModel)]="unavailability.startDate" [readonly]="!componentPermission.writePermission">
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </div>

结束日期：

<div class="end-date" fxFlex="50%" fxFlexOrder="2">
           <mat-form-field>
      <input matInput [matDatepicker]="picker2" placeholder="{{'PORTAL.ENDDATE' | translate}}" type="text" formControlName="endDate" [(ngModel)]="unavailability.endDate" [readonly]="!componentPermission.writePermission">
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
      <mat-datepicker #picker2></mat-datepicker>
   </mat-form-field>
        </div>

现在下面是我validateForm在页面加载时调用方法的角度代码（ts）。

ngOnInit() {
    ....
    this.validateForm();
}

validateForm() {
    this.unavailabilityForm = this.formBuilder.group({
     'startDate': ['', Validators.required],
     'endDate': ['', Validators.required],
     'unavailabilityReason': ['']
    });
}

问题陈述：

现在，我需要做的是-如果我选择了某个日期 …

我有一个在组件之间传递数据的服务，当它被调用时它可以工作，但是当我重新加载时，服务数据被重置。贮存 ？我很好奇的一件事是，我可以使用 rxjs 来实现这一点，但我不确定这会有什么帮助吗？我害怕使用 localstorage，因为数据将主要是对象或数组，而不是用户 ID 或会话 ID。对此的任何输入都会真的很有帮助。我制作了一个示例来帮助我。你可以在下面找到

https://stackblitz.com/edit/component-data-sharing-service

我目前正在研究angular 5应用程序。我尝试在视图的输入中更改组件的成员变量，并在更改后在组件中使用该变量。

我的结构如下：

文件夹：我的测试

• my-test.component.html
• my-test.component.css
• 我的test.component.ts

1）my-test.component.html：

<input [(ngModel)]="hello" />

2）my-test.component.ts：

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnChanges {
  hello: string = "bonjour";

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    // I'd like to log the changes of my field 'hello', 
    // once it get's changed in the input on the ui...

       console.log(changes);
  }

}

不幸的是，该解决方案不起作用。您知道如何在ui上更改组件的变量，然后在组件中使用它吗？

谢谢！！

我已经阅读了很多关于 Angular 文件夹结构的文章。我仍然不清楚我们把组件服务放在哪里。组件之间的共享服务被置于共享之下。但是仅由组件使用的服务呢？通常，我将所有组件逻辑都放入一个服务中，并将仅与 UI 相关的代码留给组件。哪个更好用：

每个组件和它的服务放到同一个文件夹中

.
??? app.component.html
??? app.component.ts
??? app.module.ts
??? app-routing.module.ts
??? shop
    ??? clients
    ?   ??? clients.component.html
    ?   ??? clients.component.ts
    ?   ??? clients.component.css
    ?   ??? clients.service.ts
    ??? orders
    ?   ??? orders.component.html
    ?   ??? orders.component.ts
    ?   ??? orders.component.css
    ?   ??? orders.service.ts
    ??? shop.module.ts
    ??? shop-routing.module.ts                 

或服务文件夹下模块的所有服务

.
??? app.component.html
??? app.component.ts
??? app.module.ts
??? app-routing.module.ts
??? shop
    ??? clients
    ?   ??? clients.component.html
    ?   ??? clients.component.ts
    ?   ??? clients.component.css
    ??? orders
    ?   ??? orders.component.html
    ?   ??? orders.component.ts …

我创建了一个可重用的组件来呈现表格。它目前适用于基本表格，但在某些情况下我希望能够自定义表格中的单个列/单元格。

这是我在父组件中使用的代码：

<!-- PARENT TEMPLATE -->
<app-table
  [headers]="headers"
  [keys]="keys"
  [rows]="rows">
</app-table>

// PARENT COMPONENT
public headers: string[] = ['First', 'Last', 'Score', 'Date'];
public keys: string[] = ['firstName', 'lastName', 'quizScore', 'quizDate'];
public rows: Quiz[] = [
  { 'John', 'Doe', 0.75, '2020-01-03T18:18:34.549Z' },
  { 'Jane', 'Doe', 0.85, '2020-01-03T18:19:14.893Z' }
];

我在子组件中使用的代码：

<!-- CHILD TEMPLATE -->
<table>
  <thead>
    <tr>
      <td *ngFor="let header of headers">
        {{ header }}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <td *ngFor="let key of keys">
        {{ render(key, …

因此，我有一个组件“motions”，它在通过一些用户输入单击按钮后执行MotionService 。然后，该服务需要根据输入将数据传递给 DebateComponent 的特定 CaucusService实例（我们将其称为服务 A）或 DiscussComponent 的 CaucusService 实例 B。
但是，到目前为止，我似乎在 MotionService 中有一个 CaucusService 的新实例。DebateComponent 和 DiscussComponent 需要 CaucusService 的不同实例，因此我在每个 @Component 中提供了它

基本上，我的 MotionService 需要在给定特定用户输入的情况下将数据传递给 A 或 B 我应该如何解决这个问题？