重用组件(Angular)

Question

我在angular中创建了一个组件，当我每个文档都有一个组件时，它工作得很好。然而，当我有多个变量时，这会产生一个奇怪的行为，最后一个变量会影响组件的两个实例。

组件的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');
}

基本上我想用不同的样式和变量重用相同的组件。在这个例子中我只使用了几个变量，而不是全部。我看到过一些根本不清楚的解释。我决定问，这样我就可以得到一个解释我的特殊例子。我真的很希望你能回答这个问题。谢谢大家。

Answer 1

parent.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

parent.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';
}