标签: angular-template

我正盯着角度学习dom操作，并注意到有关templateRef及其方法createEmbeddedView的信息。我更想了解这种方法。现在我所有的问题是，如何使用此方法的createEmbeddedView

@Component({
  selector: 'app-root',
  template: `
<ng-template #template>

</ng-template>
  `
})
export class AppComponent implements AfterViewChecked {
        @ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;      
  constructor() { }

  ngAfterViewChecked() {
    this._template.createEmbeddedView('this is a embedded view')
  }
}

我需要在我的 angular 模板中显示日期和时间，并保持更新，所以当时间更改为显示更改的时间时，应用程序应该如下所示：

这是我的 .html 模板代码：

<div class="top-right pull-right">
  <button type="button" class="btn xbutton-rectangle" (click)="logOut()">
    <div class="icon-user pull-left">
      <i class="fas fa-user fa-fw"></i>
      <span class="button-text">{{employee.FullName}}</span>
    </div>
    <div class="time-date pull-right">
      <p class="button-time">08:55</p>
      <p class="button-date">22.06.2018</p>
    </div>
  </button>
</div>

我的.ts文件：

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

  constructor() {
  }

  ngOnInit() {
    //.. some methods 
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  logOut() {
    this._globals.isAuthenticated = false;
    this._globals.loggedInUser = null;
    this._globals.token = null;
  }

} …

<ng-template>假设在 Angular 模板中，我想根据某些条件选择渲染嵌入视图 ( ) 的位置。

<ng-template #foo>
  Hello World.
</ng-template>

<p *ngIf="isBar; else baz">
  Bar:  <!-- Want to insert #foo here, sometimes -->
</p>
<div #baz>
  Baz:  <!-- Want to insert #foo over here instead, other times -->
</div>

我使用了elsean 的一部分*ngIf来插入在其他地方定义的模板。我可以编写*ngIf="false; else #foo"渲染嵌入视图模板，但我觉得这不是必要的。

<p *ngIf="isBar; else baz">
  Bar:  <ng-container *ngIf="false; else foo"></ng-container>
</p>
<div #baz>
  Baz:  <ng-container *ngIf="false; else foo"></ng-container>
</div>

在 Angular 组件中，我有一个值数组。在相关模板中，我想在两列中显示这些值。该模板使用Bootstrap框架。

由于 Angular 模板需要循环中的开始和结束标记，因此您无法通过打印</div><div class="row">来提供精确的换行符。将数组拆分为两列的正确方法是什么？

伪代码示例（这不起作用）：

public foobars = ['a', 'b', 'c', 'd', 'e'];

----

<ng-container *ngFor="let foo of foobars; let i = index">
    <ng-container *ngIf="i % 2 === 0; else secondColumn">
        <div class="row">
            <div class="col-md-6">{{foo}}</div>
        </div>
    </ng-container>
    <ng-template #secondColumn>
        <div class="col-md-6">{{foo}}</div>
    </ng-template>
</ng-container>

对不起。我是 Angular 的新手:)

我正在尝试将一些数据传递到模板中

这是调用sharedComponent的组件

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

@Component({
  selector: 'sym-test',
  templateUrl: './test.component.html',
  styles: []
})
export class TestComponent implements OnInit {

    items = [
        '111',
        '222',
        '333'
    ];

  constructor() { }

    ngOnInit() {
  }
}

<p>test works!</p>

<sym-shared [items]="items">
    <ng-template LiTemplateDirective>
        <b>{{item}}</b>
    </ng-template>
</sym-shared>

import { Component, OnInit, Input, ContentChild, TemplateRef } from '@angular/core';
import { LiTemplateDirective } from '../li-template.directive';

@Component({
    selector: 'sym-shared',
    templateUrl: './shared.component.html',
})
export class SharedComponent implements OnInit {
    @Input() items: any[]; …

我的搜索字段位于单独的组件上。搜索时在建议列表上显示名称没有问题，因为我没有在其他组件中显示它们。

搜寻HTML

<input type="text" placeholder="Search" (keyup)="getSuggestion($event.target.value)">
<div class="suggestion" *ngIf="results.length > 0 && suggest === true">
     <div *ngFor="let result of results" class="search-res" (click)="showEmployee(result._id)"> {{ result.name }} </div>
</div>
<div class="suggestion" *ngIf="results.length === 0 && suggest === true">
     <div> No results found </div>
</div>

搜索组件

getSuggestion(name) {
    $('.suggestion').show();
    this.searchService
        .getSuggestion(name)
        .subscribe(
            name => this.results = name,
            error => alert(error),
        );
  }

但是，如果要在change事件中将其显示在另一个组件（列表组件）中怎么办？

我应该在输入字段中添加什么作为函数调用？并且我应该在SearchComponent中放置什么以便结果可以显示在List Component中？

SearchService

getSuggestion(name:string): Observable<any> {
        return this.http
        .get(this.serverUrl + 'name/' + name)
        .map(this.extractData)
        .catch(this.handleError);
}

您好我是用户角5,我想切换为我的soundcloud播放器更改播放< - >暂停图标.

这是我的TypeScript,后跟我的html.

我可以在我的控制台中看到我正确切换了playMode,但字体真棒图标并没有像预期的那样改变.

谢谢您的帮助.

import { Ng2DeviceService } from 'ng2-device-detector';
import { Component, OnInit } from '@angular/core';
import { NgClass } from '@angular/common';
import './soundcloud-script.js';

@Component({
  selector: 'app-sc-player',
  templateUrl: './sc-player.component.html',
  styleUrls: ['./sc-player.component.css']
})
export class ScPlayerComponent{
  playMode: boolean;

  constructor(private deviceService: Ng2DeviceService) 
  {
    this.playMode = true;
  }

toggleIcon(){
  this.playMode = !this.playMode;
  console.log(this.playMode);
}

}

          <span id="play" 
          (click)="toggleIcon()">
          <i [ngClass]="{'fas fa-pause positionPlay': !playMode, 'fas fa-play positionPlay': playMode}"></i>
          </span>

是否可以在 angular.html 中执行两个 ngIf ？

一个例子：

if(1=2){
}else{
    if(){
    }
}

我需要做两项检查。

检查老师的限制是否错误，检查教室的可用性。

下面是我的代码示例。我是角度新手，我不知道一切是如何工作的。

   <td *ngIf="!restricaoSegUm; else templateName" *ngIf="!restricaoSalaSegUm; else sala" [dragula]='"another-bag"' [dragulaModel]='segUm'>
      <div [@resultadoAnimacao]="animationsState" class="cursor-pointer"  *ngFor='let s1 of segUm' (dblclick)="removeNumbers(s1,this.segUm)">{{s1?.no_diciplinas}}</div>
    </td>

<ng-template #templateName >
    <td style="background-color: rgb(244, 67, 54);"></td>
</ng-template>
<ng-template-sala #sala>
    <td style="background-color: rgb(244, 146, 54);"></td>
</ng-template-sala>

我有一个组件，它根据客户端设备大小切换组件的模板。组件代码为：

import {Component} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

@Component({
    selector: 'ui-switcher',
    template: `
        <ng-content *ngIf="isSmall" select="mobile"></ng-content>
        <ng-content *ngIf="!isSmall" select="web"></ng-content>
`
})
export class UiSwitcherComponent {
    public isSmall: boolean;

    constructor(breakpointObserver: BreakpointObserver) {
        breakpointObserver.observe([Breakpoints.Small, Breakpoints.XSmall]).subscribe(result => {
            this.isSmall = result.matches;
        });
    }    
}

我像这样使用它：

<ui-switcher>
    <web>
        <!-- some commented details -->
        <input class="form-control mr-2" #searchInput 
        type="text" (keyup)="this.search(searchInput.value)">
    </web>

    <mobile>
        <!-- some commented details -->
        <input class="form-control" #searchInput 
        type="text" (keyup)="this.search(searchInput.value)">
    </mobile>
</ui-switcher>

在移动尺寸中，一切正常，但在桌面尺寸中，传递给search(value)函数的值始终为空字符串。

当我调试应用程序时，似乎#searchInputtemplateref 工作不正常（它引用的元素的值始终为空）。

为什么模板引用不能正常工作？

我有两个观察点。第一个observable用于ngIf-Block语句。第二个可观察对象用于ngIf-Block内部，并映射第一个可观察对象的值。

第二个可观察到的对象不会从ngIf-Block内部的源获得第一个更新。另一方面，它在ngIf-Block之外起作用。

对这种意外行为有任何解释吗？

示例：https：//stackblitz.com/edit/angular-rxjs-template-update-problem