我的自定义指令无法正常工作

Question

我正在尝试开发一个指令，该指令通过按钮单击来增加进度条的宽度相对于按钮单击的总次数。

问题的一个sn-p >>> https://stackblitz.com/edit/angular-gufdqj /* 请拉伸视图

directive.directive.ts

import { Directive, HostBinding, HostListener } from '@angular/core';
import { VoteButton } from '../service/votebutton.service';

@Directive({
  selector: '[appApc]',
  providers: [VoteButton]
})
export class ApcDirective {
  number = this.voteService.combo();
  @HostBinding('style.width') width = this.number + '%';

  constructor(private voteService: VoteButton) {}

  @HostListener('click', ['$event.target']) voteLenght(btn) {
    this.number = this.voteService.combo();
    console.log(this.number);
  }
}

service.service.ts

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

export class VoteButton {
  APC = [1, 2, 3];
  party: string;
  total: number;

  partySelector = new EventEmitter<string>();

  logger(party: string, number: number) {
    if (party === 'APC') {
      this.APC.push(number);
    }
  }

  combo() {
    this.total = this.APC.length;
    return this.total;
  }

  
  scorer(party: string) {
    if (party === 'APC') {
      return this.APC.length;
  }
  }
}

图形组件

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { VoteButton } from '../service/votebutton.service';

@Component({
    selector: 'app-graph',
    templateUrl: './result.component.html',
    styleUrls: ['./result.component.css'],
    providers: [VoteButton]
})

export class GraphComponent implements OnInit {

    @Output() partyContainer = new EventEmitter<string>();

    score = this.voteService.APC.length;;
    counter = 8163041299;
    disabled = false;

    graphPage = 1;

    constructor(private voteService: VoteButton) {}

    ngOnInit() {

    }

    onCount(party: string) {
        this.partyContainer.emit(party);

        this.voteService.logger(party, this.counter);

        if (party === 'APC') {
            this.score = this.voteService.scorer(party);
        }
    }

}

.containers {
    height: 662px;
    background-color: rgba(255, 255, 255, 0);
    width: 100%;
    overflow: hidden;
    z-index: none;
}

.deep-bar {
    margin-top: 12px;
    margin-left: 20px;
    height: 40px;
    width: 96%;
    background-color: rgb(17, 54, 17);
    border-radius: 20px;
    border: 2px solid rgba(0, 128, 0, 0.507);
    box-shadow: 0 2px 1px 1px rgba(0, 0, 255, 0.267);
}

.vote-area {
    float: left;
    width: 10%;
    background-color: rgba(0, 0, 255, 0.205);
    height: 100%;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}

.btn-cover {
    background-color: transparent;
    width: 100%;
    height: 100%;
    color:  rgb(72, 245, 72);
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    text-align: center;
    font-weight: bold;
    font-family: monospace;
}

.btn-cover:hover {
    color: brown;
}

.passport-area {
    float: left;
    background-color: rgb(72, 245, 72);
    width: 8%;
    height: 100%; 
    transition: 0.3s; 
}

.logo-area {
    float: left;
    background-color: rgb(72, 245, 72);
    width: 8%;
    height: 100%;
}

.total-vote {
    float: left;
    width: 72.5%;
    margin-left: 5px;
    border: 2px solid rgba(0, 128, 0, 0.507);
    background-color: aliceblue;
    height: 80%;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 1px 1px 1px;
}

.prog-bar {
    float: left;
    height: 100%;
    background-color: rgb(72, 245, 72);
    border-bottom-right-radius: 20px;
    border-top-right-radius: 70px;
}

.prev {
    margin-left: 35px;
    margin-top: -1px;
    cursor: pointer;
}

.prev:hover {
    color: red;
}

.next {
    margin-right: 35px;
    margin-top: -1px;
    cursor: pointer;
}

.next:hover {
    color: red;
}

<div style="background-color: rgb(0, 128, 0);" *ngIf = "graphPage === 1" >
    <div class="deep-bar" >
            <nav class="vote-area" >
                    <button (click)="onCount('APC')" class="btn btn-cover btn-primary" >VOTE</button>
            </nav>
            <nav class="passport-area">
                    <img style="width: 100%; height: 98%" src="../../../assets/img/President_Buhari.jpg" class="image">
            </nav>
            <nav class="logo-area">
                    <img style="width: 100%; height: 98%" src="../../../assets/img/APC-LOGO-17.jpg" alt="">
            </nav>
            <nav class="total-vote">
                    <div class="prog-bar" appApc>
                            <p>{{ score }}</p>
                    </div>
            </nav>
    </div>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ApcDirective } from './directive/directive.directive';
import { GraphComponent} from './result/result.component';


@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ApcDirective, GraphComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html

<app-graph ></app-graph>

Answer 1

在你的 resultComonent.html 中

<nav class="total-vote">
       <div class="prog-bar" appApc [number] = "score">
            <p>{{ score }}</p>
       </div>
 </nav>

在您的指令中使用@input 并更新输入。如果需要，您可以从指令中删除投票按钮。

import { Directive, HostBinding, HostListener,Input ,OnChanges,SimpleChanges} from '@angular/core';
// import { VoteButton } from '../service/votebutton.service';

@Directive({
  selector: '[appApc]',

})
export class ApcDirective implements OnChanges{
  @Input() number = 0;
  @HostBinding('style.width') width = this.number + '%';

  constructor() {}

  // @HostListener('click', ['$event.target']) voteLenght(btn) {
  //   this.number = this.voteService.combo();
  //   console.log(this.number);
  // }
   ngOnChanges(changes: SimpleChanges) {
    this.width = this.number + '%'
  }
}

这是您编辑的代码stackblitz link

Answer 2

你只需要将主机绑定变量width改成getter as -

  @HostBinding('style.width')   
  get widthSize(){
     return this.voteService.combo() + '%';
   }

https://stackblitz.com/edit/angular-gufdqj