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

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

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:

  1. import { ChangeDetectionStrategy, Component } from '@angular/core';
  3. @Component({
  4.   selector: 'app-scroll-child',
  5.   template: `
  6.     <ng-container>
  7.       <div class="snap-start shrink-0 grid w-full h-screen place-items-center text-8xl">
  8.         <ng-content></ng-content>
  9.       </div>
  10.     </ng-container>
  11.   `,
  12.   changeDetection: ChangeDetectionStrategy.OnPush,
  13.   standalone: true,
  14. })
  15. export class ScrollChildComponent {}

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

  1. <app-scroll-container>
  2.   <app-scroll-child>
  3.     <div class="snap-start shrink-0 bg-amber-200 grid w-full h-screen place-items-center text-8xl">1</div>
  4.   </app-scroll-child>
  5.   <app-scroll-child>
  6.     <div class="snap-start shrink-0 bg-blue-200 grid w-screen h-screen place-items-center text-8xl">2</div>
  7.   </app-scroll-child>
  8.   <app-scroll-child>
  9.     <div class="snap-start shrink-0 bg-orange-200 grid w-screen h-screen place-items-center text-8xl">3</div>
  10.   </app-scroll-child>
  11.   <app-scroll-child>
  12.     <div class="snap-start shrink-0 bg-green-200 grid w-screen h-screen place-items-center text-8xl">4</div>
  13.   </app-scroll-child>
  14. </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:

  1. import { ChangeDetectionStrategy, Component, ElementRef, ViewChild } from &#39;@angular/core&#39;;
  2. import { CommonModule } from &#39;@angular/common&#39;;
  4. @Component({
  5.   selector: &#39;app-scroll-container&#39;,
  6.   standalone: true,
  7.   template: `
  8.     &lt;div
  9.       class=&quot;flex snap-x snap-proximity h-screen w-full mx:auto overflow-x-scroll overflow-y-hidden &quot;
  10.       #scrollContainer
  11.     &gt;
  12.       &lt;ng-content&gt;&lt;/ng-content&gt;
  13.     &lt;/div&gt;
  14.   `,
  15.   changeDetection: ChangeDetectionStrategy.OnPush,
  16. })
  17. export class ScrollContainerComponent {
  18.   @ViewChild(&#39;scrollContainer&#39;)
  19.   scrollContainer!: ElementRef;
  21.   ngAfterViewInit() {
  22.     this.scrollContainer.nativeElement.addEventListener(&#39;keydown&#39;, this.handleKeydown.bind(this));
  23.   }
  25.   handleKeydown(event: KeyboardEvent) {
  26.     switch (event.key) {
  27.       case &#39;ArrowLeft&#39;:
  28.         this.scrollLeft();
  29.         break;
  30.       case &#39;ArrowRight&#39;:
  31.         this.scrollRight();
  32.         break;
  33.     }
  34.   }
  36.   scrollLeft() {
  37.     this.scrollContainer.nativeElement.scrollLeft -= 100;
  38.   }
  40.   scrollRight() {
  41.     this.scrollContainer.nativeElement.scrollLeft += 100;
  42.   }
  43. }

And a child:

  1. import { ChangeDetectionStrategy, Component } from &#39;@angular/core&#39;;
  3. @Component({
  4.   selector: &#39;app-scroll-child&#39;,
  5.   template: `&lt;div class=&quot;snap-start shrink-0 grid w-full h-screen place-items-center text-8xl&quot;&gt;
  6.     &lt;ng-content&gt;&lt;/ng-content&gt;
  7.   &lt;/div&gt;`,
  8.   changeDetection: ChangeDetectionStrategy.OnPush,
  9.   standalone: true,
  10. })
  11. export class ScrollChildComponent {}

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

  1. &lt;app-scroll-container&gt;
  2.       &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;
  3.       &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;
  4.       &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;
  5.       &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;
  6.     &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

  1. <div app-scroll-child
  2.       class="snap-start shrink-0 grid w-full h-screen place-items-center text-8xl">
  4.       <div class="snap-start shrink-0 bg-amber-200..."></div>
  5.       ...
  6. </div>
英文:

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

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

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

  1. &lt;div app-scroll-child 
  2.       class=&quot;snap-start shrink-0 grid w-full h-screen place-items-center text-8xl&quot;&gt;
  4.       &lt;div class=&quot;snap-start shrink-0 bg-amber-200...&lt;/div&gt;
  5.       ...
  6. &lt;/div&gt;

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

发表评论

匿名网友

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

确定