重用组件（Angular）答案

【问题标题】：Reuse component (Angular)重用组件（Angular）
【发布时间】：2021-10-27 12:58:08
【问题描述】：

我创建了一个有角度的组件，当我每个文档都有一个组件时它可以正常工作。但是，当我有多个变量时，这会产生奇怪的行为，其中最后一个变量会影响组件的两个实例。

这是组件的 html。

<div class="thumbnail-div" id="top">
    <img id="img" class="img" src="{{image}}" alt="">
    
    <p id="text" class="text">
      
      <a id="link" class="link" href={{link}}>{{title}}</a><br>
      <i id="ita" class="itaics">By {{author}}</i>

    </p>
</div>

这是父 html

<thumbnail 
    title={{articles[0].title}}
    author={{articles[0].author}}
    image={{articles[0].img}}
    link="/#/articles/{{articles[0].date}}"
    color='transparent'
    pos='right'
    long=true
    >
</thumbnail>

ts 文件

import { Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'thumbnail',
  templateUrl: './thumbnail.component.html',
  styleUrls: ['./thumbnail.component.css'],
  
})
export class ThumbnailComponent implements OnInit {

 

  @Input() width: string;
  @Input() height: string;
  @Input() img_width: string; 
  @Input() img_height: string;
  @Input() text_width: string; 
  @Input() text_height: string;
  
  @Input() title: string;
  @Input() author: string;
  @Input() image: string;
  @Input() link: string;
  @Input() color: string;
  
  @Input() fontSize: string;
  @Input() ita_fontSize: string;
  @Input() left: boolean;
  @Input() right: boolean;
  @Input() bottom: boolean;
  @Input() top: boolean;
  @Input() move_v: string;
  @Input() move_h: string;
  @Input() padding: string;
  @Input() pos: string;

  @Input() long:boolean;
  @Input() text: boolean;
  @Input() short:boolean;
  @Input() thumbnail: boolean;
  
  

  constructor() {

    
   }

  ngOnInit(): void {

    /*

    $('#top').width(this.width);
    $('#top').height(this.height);

    $('#img').width(this.img_width);
    $('#img').height(this.img_height);

    $('#text').width(this.text_width);
    $('#text').height(this.text_height);
    $('#text').css('background-color', this.color);
    $('#text').css('font-size', this.fontSize);
    $('#text').css('padding', this.padding);
    
    if(this.left){
      $('#text').css('left', this.move_h);
    }else if(this.right){
      $('#text').css('right', this.move_h);
    }
    
    if(this.bottom){
      $('#text').css('bottom', this.move_v);
    }else if(this.top){
      $('#text').css('top', this.move_v);
    }
    

    */

    if(this.long){
      this.longStyle();
    }else if(this.text){
      this.longTextStyle();
    }else if(this.short){
      this.shortStyle();
    }else if(this.thumbnail){
      this.cardStyle();
    }

  }


  longStyle(){

    /**
     * 
     * height="300px"
    
    img_width="100%"
    img_height="100%"

    fontSize="30px"
    right=true
    move_h="0px"

    bottom=true
    move_v="100px"
     */

    $('#top').width('100%');
    $('#top').height('500px');

    $('#img').width('100%');
    $('#img').height('100%');
    $('#img').css('filter', 'brightness(50%)');

    //$('#text').width('200px');
    //$('#text').height('300px');
    $('#text').css('background-color', this.color);
    $('#text').css('color', 'aliceblue');
    $('#text').css('font-size', '30px');
    $('#ita').css('font-size', '20px');
    //
    


    if(this.pos == 'left'){
      $('#text').css('left', '100px');

    }else if(this.pos = 'right'){
      $('#text').css('right', '100px');
    }
    
    
    $('#text').css('bottom', '50px');
    
    

  }

  longTextStyle(){

    
    /**
     * 
     * height="300px"
    
    img_width="100%"
    img_height="100%"

    fontSize="30px"
    right=true
    move_h="0px"

    bottom=true
    move_v="100px"
     */

    $('#top').width('80%');
    $('#top').height('600px');
    $('#top').css('margin', '0 auto');

    $('#img').width('100%');
    $('#img').height('70%');
    $('#img').css('filter', 'brightness(50%)');
    
    $('#link').css('pointer-events', 'none');
    $('#ita').css('display', 'none');

    $('#text').css('text-decoration', 'none');
    $('#text').css('padding', '20px');
    
    $('#text').css('background-color', this.color);
    
    $('#text').css('font-size', '20px');
    $('#ita').css('font-size', '15px');
    
    $('#text').width('80%');
    $('#text').css('margin-left', '50px');
  
    //$('#text').css('right', '100px');
    $('#text').css('bottom', '70px');
  }

  shortStyle(){

    /**
     * 
     * height="300px"
    
    img_width="100%"
    img_height="100%"

    fontSize="30px"
    right=true
    move_h="0px"

    bottom=true
    move_v="100px"
     */

    $('#top').width('100%');
    $('#top').height('400px');

    $('#img').width('80%');
    $('#img').height('100%');
    $('#img').css('filter', 'brightness(50%)');
    

    $('#text').width('250px');
    $('#text').css('vertical-align', 'middle');
    $('#text').height('250px');
    $('#text').css('padding', '25px');
    
    $('#text').css('background-color', this.color);
    
    $('#text').css('font-size', '25px');
    $('#ita').css('font-size', '15px');
    //
    


    if(this.pos == 'left'){
      $('#img').css('right', '0px');
      $('#text').css('left', '60px');

    }else if(this.pos = 'right'){
      $('#text').css('right', '100px');
    }
    
    
    $('#text').css('bottom', '50px');
    
    
  }

  cardStyle(){

    /**
     * 
     * height="300px"
    
    img_width="100%"
    img_height="100%"

    fontSize="30px"
    right=true
    move_h="0px"

    bottom=true
    move_v="100px"
     */

    $('#top').width('300px');
    $('#top').height('300px');

    $('#img').width('100%');
    $('#img').height('70%');
    $('#img').css('filter', 'brightness(50%)');
    

    
    $('#text').css('padding', '10px');
    
    $('#text').css('background-color', this.color);
    
    $('#text').css('font-size', '18px');
    $('#ita').css('font-size', '15px');
    //
  
    //$('#text').css('right', '100px');
    $('#text').css('bottom', '20px');
  }

基本上我想重用具有不同样式和变量的相同组件。在这个例子中我只使用了几个变量，而不是全部。我看到了一些根本不清楚的解释。我决定问一下，这样我就可以对我的特定示例进行解释。我真的很感激这个问题的答案。谢谢各位。

【问题讨论】：

哪个变量以及以何种方式影响其他实例？
您能否更具体地说明哪些变量并添加您拥有@Input 变量的部分，所以也许您在做什么？
好的，我会编辑它
完成。我包含了组件的 ts 文件
很抱歉，您这样做完全错了。您在 Angular 中使用 jQuery，这会导致很多错误。在这种特定情况下，您的模板中有 ID，例如 #text #img 并在不同的实例中操作它们。但是 ID 是唯一的，所以这将是您的问题之一。

标签： html angular components

【解决方案1】：

父.html

<div class="thumbnail-div" id="top">
    <img id="img" class="img" src="{{image}}" alt="" [ngStyle]="myStyle">
    
    <p id="text" class="text">
      
      <a id="link" class="link" href={{link}}>{{title}}</a><br>
      <i id="ita" class="itaics">By {{author}}</i>

    </p>
</div

父.ts

@Input() myStyle: any;

child.html

<thumbnail 
    title={{articles[0].title}}
    author={{articles[0].author}}
    image={{articles[0].img}}
    link="/#/articles/{{articles[0].date}}"
    color='transparent'
    pos='right'
    long=true
    [myStyle]= "newStyle"
    >
</thumbnail>

child.ts

newStyle: any;

onInit() {
 this.newStyle = {
   backgroundColor: 'red';
}

【讨论】：