如何移除Angular为组件添加的包装元素?

huangapple go评论108阅读模式
英文:

How do i remove the wrapper element added by Angular to a component?

问题

I can see that you want to remove the wrapper element Angular adds to app-scroll-child components. To achieve this, you can use Angular's <ng-container> as a wrapperless container. Here's how you can modify your code:

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

@Component({
  selector: 'app-scroll-child',
  template: `
    <ng-container>
      <div class="snap-start shrink-0 grid w-full h-screen place-items-center text-8xl">
        <ng-content></ng-content>
      </div>
    </ng-container>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
})
export class ScrollChildComponent {}

By wrapping the contents in <ng-container>, you can use <app-scroll-child> without the additional wrapper element:

<app-scroll-container>
  <app-scroll-child>
    <div class="snap-start shrink-0 bg-amber-200 grid w-full h-screen place-items-center text-8xl">1</div>
  </app-scroll-child>
  <app-scroll-child>
    <div class="snap-start shrink-0 bg-blue-200 grid w-screen h-screen place-items-center text-8xl">2</div>
  </app-scroll-child>
  <app-scroll-child>
    <div class="snap-start shrink-0 bg-orange-200 grid w-screen h-screen place-items-center text-8xl">3</div>
  </app-scroll-child>
  <app-scroll-child>
    <div class="snap-start shrink-0 bg-green-200 grid w-screen h-screen place-items-center text-8xl">4</div>
  </app-scroll-child>
</app-scroll-container>

This modification should allow you to use <app-scroll-child> without the extra wrapper element.

英文:

I am making an Angular app + Tailwind that is one large horizontal page that allows the user to scroll from left to right using scroll-snap-type. When i try to cleanup my code and create reusable components the rendered html is different than when i have all my HTML in one component.

I have created a ScrollContainerComponent:

import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;

@Component({
  selector: &#39;app-scroll-container&#39;,
  standalone: true,
  template: `
    &lt;div
      class=&quot;flex snap-x snap-proximity h-screen w-full mx:auto overflow-x-scroll overflow-y-hidden &quot;
      #scrollContainer
    &gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ScrollContainerComponent {
  @ViewChild(&#39;scrollContainer&#39;)
  scrollContainer!: ElementRef;

  ngAfterViewInit() {
    this.scrollContainer.nativeElement.addEventListener(&#39;keydown&#39;, this.handleKeydown.bind(this));
  }

  handleKeydown(event: KeyboardEvent) {
    switch (event.key) {
      case &#39;ArrowLeft&#39;:
        this.scrollLeft();
        break;
      case &#39;ArrowRight&#39;:
        this.scrollRight();
        break;
    }
  }

  scrollLeft() {
    this.scrollContainer.nativeElement.scrollLeft -= 100;
  }

  scrollRight() {
    this.scrollContainer.nativeElement.scrollLeft += 100;
  }
}

And a child:

import { ChangeDetectionStrategy, Component } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-scroll-child&#39;,
  template: `&lt;div class=&quot;snap-start shrink-0 grid w-full h-screen place-items-center text-8xl&quot;&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/div&gt;`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
})
export class ScrollChildComponent {}

However the it only works when i use it like this:

&lt;app-scroll-container&gt;
      &lt;div class=&quot;snap-start shrink-0 bg-amber-200 grid w-full h-screen place-items-center  text-8xl&quot;&gt;1&lt;/div&gt;
      &lt;div class=&quot;snap-start shrink-0 bg-blue-200 grid w-screen h-screen place-items-center text-8xl&quot;&gt;2&lt;/div&gt;
      &lt;div class=&quot;snap-start shrink-0 bg-orange-200 grid w-screen h-screen place-items-center text-8xl&quot;&gt;3&lt;/div&gt;
      &lt;div class=&quot;snap-start shrink-0 bg-green-200 grid w-screen h-screen place-items-center text-8xl&quot;&gt;4&lt;/div&gt;
    &lt;/app-scroll-container&gt;

Instead of using the &lt;app-scroll-child&gt;1&lt;/app-scroll-child&gt;.

Please help me in removing the wrapper element angular adds to app-scroll-child

答案1

得分: 1

如果您的选择器挡住了视线,请查看 [ ]

选择器:'[app-scroll-child]'

您可以将其应用于任何 HTML 标记,例如 div

<div app-scroll-child
      class="snap-start shrink-0 grid w-full h-screen place-items-center text-8xl">

      <div class="snap-start shrink-0 bg-amber-200..."></div>
      ...
</div>
英文:

If your selector it's in the way, see the [ ]

selector: &#39;[app-scroll-child]&#39;

You can applied to any html tag, e.g. a div

&lt;div app-scroll-child 
      class=&quot;snap-start shrink-0 grid w-full h-screen place-items-center text-8xl&quot;&gt;

      &lt;div class=&quot;snap-start shrink-0 bg-amber-200...&lt;/div&gt;
      ...
&lt;/div&gt;

huangapple
  • 本文由 发表于 2023年8月10日 22:30:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76876725.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定