标签: angular-components

我的应用程序有一个父组件和两个兄弟组件。

<feed>
 <status></status>
 <post></post>
</feed>

我想要实现的是，当我在基本上是文本字段的状态组件中写一些东西并提交时，我应该将该数据传递给 post 组件并调用 post 组件中的另一个函数来更新它的视图。但我不知道如何实现这一点。任何帮助将不胜感激。

我已经成功地@HostBinding在我的 Angular 6 应用程序中使用将属性应用到宿主组件，就像在变量为真时应用类一样：

@HostBinding('class.compact-ui') isCompact;

但是，现在我需要根据选择菜单的模型分配 4 个可能的类之一。例如，用户可以red，blue或green。

我想我可以在任何颜色为真时使用多个主机绑定：

@HostBinding('class.green-ui') uiColor === 'green';

但这似乎是错误的。这样做的正确方法是什么？

我正在构建一个 angular 5 应用程序，但在玩路线时遇到了麻烦......

我有 2 个主布局，每个布局都有如下子路由：

SiteLayoutComponent - HomeComponent AppLayoutComponent - ContactComponent

我的问题是默认路由，当应用程序第一次加载时，使用空 URL，路由器必须重定向到 Home 组件，它有子路由“SiteLayoutComponent”，这里的问题是它只加载了 HomeComponent 但不是具有<navbar-component>. 它仅在浏览器中输入 /home 时有效。以下是我的路线：

const appRoutes: Routes = [

{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
},
//Site routes goes here        
{
    path: 'home',
    component: SiteLayoutComponent,
    children: [
        { 
            path: '', 
            component: HomeComponent 
        }
    ]
},
//App routes goes here
{
    path: 'app',
    component: AppLayoutComponent,
    children: [
        { path: 'contact', component: ContactComponent }
    ]
},
//No layout routes    
{
    path: …

我有多个组件（在 NgFor 循环中）调用相同的服务。

我想要的是，当一个组件更改同一服务中的值时，该新值会被发送到调用该服务的每个组件，并随后更新组件变量中的该值。

我希望这是有道理的。

如果您需要更多信息，请告诉我。

我的应用程序中有两个模块。一个是雇主，第二个是登陆。我在登陆模块中创建了一个组件，我想与雇主模块共享这个组件。为此，我在父模块的 app.module.ts 中声明了这个组件，并在子模块中使用它们。

如果我在单个模块中使用它，它已经在工作，但是当我在不同的模块中共享它时，它会显示错误

student-rating.component.html 和 student-rating.component.ts

<div class="stu_profile_ratings">
          <h3>Average Ratings</h3>
            <!-- <rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true">
              </rating> -->
              <a (click)="showHideDrop();"> <img src ="../../../assets/images/drop-down-arrow-white.png" /></a> 
              <div *ngIf="showRatings" class="ratings_dropdown ">
                <h4>Ratings given by verified employers</h4>
                  <ul class="marginT10">
                    <li>
                      <h5>Performance</h5>
                     <!--  <rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                    <li>
                      <h5>Work Quality</h5>
               <!--        <rating [(ngModel)]="work_quality" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                    <li>
                      <h5>Professionalism</h5>
                   <!--    <rating [(ngModel)]="professionalism" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                  </ul>
              </div>

import { Component, OnInit ,Input, ChangeDetectorRef} from '@angular/core';
declare var $: …

我一生都无法弄清楚为什么这没有触发，因为这是一件相当简单的事情。我有一个 Angular 组件，仅包含以下内容：

<a href="#services">Click</a>

在相应组件的CSS中，我有这样的：

@keyframes bounce{
    0% { transform: translateY(0px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0px); }
}
a{
    font-size: 3rem;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.2s;
    animation: bounce 1.5s infinite;
}

使用 Chrome 开发工具，我可以看到它在样式标签中输出以下内容：

@-webkit-keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); …

我正在开发一个 Angular 应用程序，在该应用程序中我创建了一个名为 TripSummaryComponent 的组件，我用它来以这种方式显示旅行信息：

<div *ngFor="let trip of trips">
    <trip-summary [trip]="trip"></trip-summary>
</div>

现在我的需求是：在 DOM 中生成 TripSummaryComponent 的每个实例后，如何通过唯一的 id 来标识它。

预先感谢您的帮助。

假设我将使用 nx 能够在单一存储库中的不同站点之间共享库。我有两个网站：

• 站点 1：Angular 应用程序
• 站点 2：静态站点

站点 1 有一个 helloWorld Angular 组件。在站点 2 上，我想使用 helloWorld 组件，但作为由 Angular 元素创建的 Web 组件。所有 Angular 组件和元素都应存储在共享的外部 nx 库中。

有没有办法在常规 Angular 组件和 Angular 元素之间共享代码？或者，将常规组件嵌套在元素内？

我想使用ngx-translate库检测“当前语言”的切换。

我可以使用哪个 js 事件来实现这一点？

为了更好地理解我的意思，请检查这个简单的示例： https: //stackblitz.com/edit/github-yvbmgu

我想在 ngOnInit() 上检测“diff”组件中 currentLang 的变化。

我有一个带有observable的服务,通过组件订阅.当订户显示初始值时,这似乎有效.我有另一个组件,然后更新observable但是新值不会显示.

服务:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of'; 

@Injectable()

export class BannerService {

    banners$: Observable<any[]> = Observable.of([]);

    getBanners(): Observable<any[]> {
        return this.banners$;
    }

    setBanners(banners: any[]): void {
        this.banners$ = Observable.of(banners);
    }

}

订阅者组件:

import { Component, ViewEncapsulation, OnInit } from '@angular/core';

import { BannerService } from './../banner/banner.service';

@Component({
    selector: '.banner',
    templateUrl: './banner.component.html',
    styleUrls: ['./banner.component.sass'],
    encapsulation: ViewEncapsulation.None
})

export class BannerComponent implements OnInit {

    constructor(private bannerService: BannerService){}

    ngOnInit() {
        this.bannerService.banners$.subscribe(banners => {
            console.log(banners); …