Как включить ввод и кнопку от родительского компонента в угловых? - PullRequest
Новая
       5

Как включить ввод и кнопку от родительского компонента в угловых?

0 голосов
/ 09 января 2019

У меня есть родительский компонент со следующим,

app.component.html: 

<h1> Look at console </h1>
<app-profile-image></app-profile-image>

app.component.ts: 

  ngOnInit() {

    console.log((document.getElementById('fileInput') as any));

    console.log((document.getElementById('fileInput') as any).disabled);

    console.log((document.getElementsByClassName('hover-text') as any));

    console.log((document.getElementsByClassName('hover-text') as any)[0].disabled)
  }

Вы можете увидеть реализацию родительского и дочернего компонента в примере https://stackblitz.com/edit/angular-file-upload-preview-zaipvg

Здесь, в дочернем компоненте, вы можете увидеть следующее, 

  <button class="hover-text" [disabled]="true">Choose file</button>

и 

<input id="fileInput" type='file' (change)="onSelectFile($event)" [disabled]="true">

По умолчанию они оба отключены.

Я пытаюсь включить эти два отключенных атрибута, используя родительский .

дочерний элемент <app-profile-image></app-profile-image>, который я использую, является библиотекой в ​​моем реальном приложении, что означает, что я не могу напрямую изменить код дочернего элемента, поэтому через родительский элемент мне нужно изменить атрибут disabled, чтобы его включить ..

Я пробовал, 

console.log((document.getElementById('fileInput') as any));

и 

console.log((document.getElementsByClassName('hover-text') as any));

и оба дают отключенный атрибут (вы можете увидеть консоль в данном примере)

Но 

console.log((document.getElementById('fileInput') as any).disabled);

и 

console.log((document.getElementsByClassName('hover-text') as any)[0].disabled)

дает результат как ложный, но я получаю отключенный атрибут в приведенном выше файле console.log, но тогда почему я получаю ложный результат как результат, даже если атрибут присутствовал?

Если он дает результат как true, то известно, что значение disabled равно true, поэтому в зависимости от условия я могу включить кнопку и ввод, но не знаю причину, по которой он отключен как false в консоли.

Пожалуйста, помогите мне включить оба отключенных button и input в приведенном примере , используя только родительский компонент (то есть app.component.ts), чтобы я мог выбрать любое изображение для загрузки в него ..

Ни в коем случае я не могу редактировать дочерний компонент, потому что это пакет библиотеки, и у меня нет никакого кода в моем реальном приложении, и единственное, что я могу сделать, - это то, что я могу редактировать только родительский компонент ..

Ответы [ 2 ]

0 голосов
/ 09 января 2019

В вашем app.component.html: 

<app-profile-image (mouseenter)=onProfileImageHovered()></app-profile-image>

В вашем app.component.ts: 

onProfileImageHovered(){
  document.getElementById('fileInput')['disabled'] = false;
  const hoverTextCollection = document.getElementsByClassName('hover-text');
  if (!hoverTextCollection) {
    return null;
  }
  const btn = Array.from(hoverTextCollection).find((e) => {
    return (e instanceof HTMLButtonElement &&
            e.innerHTML === 'Choose file');
  });
  if(btn) {
    btn['disabled'] = false;
  }
}

stackblitz

0 голосов
/ 09 января 2019

Привет, вы можете использовать свойство Input в дочернем компоненте. вот рабочий пример https://stackblitz.com/edit/angular-file-upload-preview-ptgq2f Пожалуйста, примите, если ответ работает для вас.

...