как создать директиву в angular 6 и категорично отображать контент - PullRequest
Новая
       21

как создать директиву в angular 6 и категорично отображать контент

0 голосов
/ 09 мая 2019

Я новичок в angular 6 и хочу реализовать директиву options, которая отображает другой HTML. Эта необязательная директива содержит модель данных объекта типа, которая передается в качестве входных данных в директиву.

Я хочу знать, как я могу отображать или скрывать различное HTML-содержимое в директиве на основе данных, отправленных в директиву.

Я использовал директиву атрибута с содержанием html. Теперь, основываясь на ответе класса директивы, я должен показать и скрыть содержимое html (например, установить флажок show, если имя класса установлено, введите текст ввода, когда имя класса является строкой).

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

Пожалуйста, найдите нижеприведенный код, который я добавил, так что здесь я не уверен, как мне скрыть и показать теги ввода, основанные на категории, потому что я не уверен, как я должен это сделать из ловушек жизненного цикла директивы.

надеюсь, что я ясен, и по-королевски уведи меня.

Directive.ts 

@Directive({
  selector: '[appOption]'
})
export class OptionDirective implements OnInit {

 @Input('dataObject') dataObject : Object = {
         id: '001',
         name:'basicOption', 
         className:'Options', 
         label:'A text string that represents the text that should be displayed next to the input',
         isDisabled : false,
         value: 'boolean',
         description : '',
         contextHelp : 'Options',
         graphicsUrl : ''
 };
 @Output() onchange : EventEmitter<any> = new EventEmitter();

  constructor( private element : ElementRef , renderer : Renderer2 ){    
  }

    ngOnInit(){
        console.log("this is the options object", this.dataObject);
        this.onchange.emit();
    } 
}`````



Component.html

````
<div class="col" appOption [dataObject] (onchange) = stateChange($event)>
                <div class="option-box">
                        <label>
                            <div class="option-label-box">
                                <input type="checkbox" ng-model="value" ng-true-value="1" ng-false-value="0" ng-change="changeDetected(name)" 
                                ng-disabled="option.disabled">

                               <input type="number" class="numeric-option" ng-disabled="option.disabled"  ng-model=".value" ng-model-options="{ debounce: 500 }" step="option.incrementValue" min="option.minValue" max="option.maxValue" ng-change="changeDetected(option.name)">&nbsp;
                                <input type="text" class="string-option" ng-disabled="option.disabled" ng-model="option.value" ng-model-options="{ debounce: 1000 }" placeholder="option.contextHelp" ng-change="changeDetected(option.name)" >&nbsp;
                                <span ng-class="{'option-textbox-label': opTion.extendedDesc}">option.label</span>
                            </div>
                            <img ng-if="option.webId" ng-src="generateCollateralImageUrl(option.webId) || '//:0'" class="card-image"> 

                        </label>
                    </div>
         </div>````
...