其他

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

@Component({
    selector: 'app-example',
    template: `<p>This is an example component!</p>`
})
export class ExampleComponent implements OnInit {
    constructor(private elementRef: ElementRef) {}

    ngOnInit() {
        // 通过 ElementRef 访问宿主元素
        console.log(this.elementRef.nativeElement); // 打印宿主元素
        this.elementRef.nativeElement.style.backgroundColor = 'lightblue'; // 动态修改背景色
    }
}

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

@Component({
  selector: 'app-dynamic',
  template: `<p>This is a dynamically loaded component!</p>`
})
export class DynamicComponent {}

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
    selector: 'app-parent',
    template: `<ng-container #container></ng-container>`
})
export class ParentComponent implements OnInit {
    @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

    ngOnInit() {
        // 创建并插入动态组件
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
        this.container.clear();  // 清除之前的视图（如果有的话）
        this.container.createComponent(componentFactory);  // 动态加载组件
    }
}

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

@Component({
  selector: 'app-parent',
  template: `
    <ng-template #template>
      <p>This is a dynamically inserted template!</p>
    </ng-template>
    <ng-container #container></ng-container>
  `
})
export class ParentComponent implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  @ViewChild('template') template: TemplateRef<any>;

  ngOnInit() {
    // 动态插入模板
    this.container.createEmbeddedView(this.template); 
  }
}

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="toggleComponent()">Toggle Component</button>
    <ng-container #container></ng-container>
  `
})
export class ParentComponent implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  private componentCreated = false;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnInit() {}

  toggleComponent() {
    if (this.componentCreated) {
      this.container.clear();  // 移除组件
      this.componentCreated = false;
    } else {
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
      this.container.createComponent(componentFactory);  // 动态创建组件
      this.componentCreated = true;
    }
  }
}

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    // 使用 Renderer2 操作 DOM
  }
}

import { Title } from "@angular/platform-browser"
@Component({
    ...
})
export class LoginComponent implements OnInit {
    constructor(private title: Title) {}
    ngOnInit() {
        title.setTitle("Login")
    }
}

import { Meta } from "@angular/platform-browser"
@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta) {}
    ngOnInit() {
        meta.updateTag({name: "title", content: ""})
        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
        meta.updateTag({name: "site", content: "My Site"})
    }
}

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

@Component({
    selector: 'app-document-example',
    template: `<h1>Check the document title in the console!</h1>`
})
export class DocumentExampleComponent implements OnInit {

    constructor(@Inject(DOCUMENT) private document: Document) {}

    ngOnInit() {
        // 访问和操作 document 对象
        console.log('Document title:', this.document.title);
        this.document.title = 'New Document Title'; // 修改文档标题
    }
}

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

@Component({
    selector: 'app-ngzone-example',
    template: `<h1>{{ message }}</h1>`
})
export class NgZoneExampleComponent {
    message: string = 'Hello';

    constructor(private ngZone: NgZone) {}

    startLongRunningTask() {
        // 在 Angular Zone 外部运行代码，不触发变更检测
        this.ngZone.runOutsideAngular(() => {
            setInterval(() => {
                // 假设这是一个非常频繁的操作
                console.log('Running outside Angular zone');
            }, 1000);
        });
    }
}

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

@Component({
    selector: 'app-ngzone-example',
    template: `<h1>{{ message }}</h1>`
})
export class NgZoneExampleComponent {
    message: string = 'Hello';

    constructor(private ngZone: NgZone) {}

    updateMessage() {
        // 在 Angular Zone 内运行，确保变更检测被触发
        this.ngZone.run(() => {
            this.message = 'Updated Message';
        });
    }
}

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

@Component({
    selector: 'app-ngzone-example',
    template: `<h1>{{ message }}</h1>`
})
export class NgZoneExampleComponent implements OnInit {
    message: string = 'Hello';

    constructor(private ngZone: NgZone) {}

    ngOnInit() {
        // 监听 Angular Zone 的稳定事件
        this.ngZone.onStable.subscribe(() => {
            console.log('All asynchronous tasks have completed.');
        });
    }
}

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

@Component({
  selector: 'app-ngzone-example',
  template: `<h1>{{ message }}</h1>`
})
export class NgZoneExampleComponent implements OnInit {
  message: string = 'Hello';

  constructor(private ngZone: NgZone) {}

  ngOnInit() {
    console.log('Has pending macro tasks:', this.ngZone.hasPendingMacrotasks);
    console.log('Has pending micro tasks:', this.ngZone.hasPendingMicrotasks);
  }
}

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Component({
    selector: 'app-example',
    template: `
    <div [innerHTML]="trustedHtml"></div>
    <img [src]="trustedUrl" />
  `,
})
export class ExampleComponent {
    trustedHtml: SafeHtml;
    trustedUrl: SafeUrl;

    constructor(private sanitizer: DomSanitizer) {
        // 使用 DomSanitizer 处理不安全的内容
        this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml('<p>Unsafe HTML content</p>');
        this.trustedUrl = this.sanitizer.bypassSecurityTrustUrl('javascript:alert("XSS Attack")');
    }
}

<app-example data-id="12345"></app-example>

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

@Component({
    selector: 'app-example',
    template: `<p>{{ dataId }}</p>`
})
export class ExampleComponent {
    constructor(@Attribute('data-id') public dataId: string) {
        console.log('Data ID:', dataId); // 12345
    }
}

function runSettingsOnInit() {
    ...
}

@NgModule({
    providers: [
        { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
    ]
})

<!-- my-component.component.html -->
<div class="inner">
  <p>Content inside component</p>
</div>

/* my-component.component.css */
:host {
  display: block;
  border: 1px solid red;
  padding: 20px;
}

:host(.highlight) {
  background-color: yellow;
}

<!-- parent.component.html -->
<app-my-component class="special"></app-my-component>

/* my-component.component.css */
:host-context(.special) {
  background-color: lightblue;
}

:host-context(.another-class) {
  background-color: lightgreen;
}

<!-- parent.component.html -->
<app-child></app-child>

/* parent.component.css */
::ng-deep app-child .child-element {
  color: red;
}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  // 创建信号
  firstName = signal('John');
  lastName = signal('Doe');

  // 使用 computed 创建计算属性
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  updateFirstName(value: string) {
    this.firstName.set(value);
  }

  updateLastName(value: string) {
    this.lastName.set(value);
  }
}

<p>Full Name: {{ fullName() }}</p>
<input (input)="updateFirstName($event.target.value)" placeholder="First Name">
<input (input)="updateLastName($event.target.value)" placeholder="Last Name">

import { Component, computed, effect, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  firstName = signal('John');
  lastName = signal('Doe');

  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

  constructor() {
    // 监听 fullName 变化
    effect(() => {
      console.log('Full name updated:', this.fullName());
    });
  }
}

import { Component, ElementRef, ViewChild } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

@Component({
  selector: 'app-root',
  template: `
    <button #trigger (click)="openOverlay()">打开浮层</button>
  `,
})
export class AppComponent {
  @ViewChild('trigger') trigger!: ElementRef;
  private overlayRef!: OverlayRef;

  constructor(private overlay: Overlay) {}

  openOverlay() {
    // 获取按钮的位置信息
    const positionStrategy = this.overlay
      .position()
      .flexibleConnectedTo(this.trigger)
      .withPositions([{ originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top' }]);

    // 创建 OverlayRef
    this.overlayRef = this.overlay.create({
      positionStrategy,
      hasBackdrop: true, // 添加背景（点击外部关闭）
      backdropClass: 'cdk-overlay-transparent-backdrop',
    });

    // 监听背景点击事件，关闭浮层
    this.overlayRef.backdropClick().subscribe(() => this.overlayRef.dispose());

    // 将浮层附加到 Overlay
    const tooltipPortal = new ComponentPortal(TooltipComponent);
    this.overlayRef.attach(tooltipPortal);

    // 使用 TemplatePortal 将 ng-template 渲染到 Overlay
    // const portal = new TemplatePortal(template, this.viewContainerRef);
    // this.overlayRef.attach(portal);
  }
}