मेरे पास नेवबार में एक "+" बटन है जो अंदर है

<app-navbar></app-navbar>

जब मैं उस पर क्लिक करता हूं तो मैं घटक दिखाना चाहता हूं

<app-stepper></app-stepper>

यह मेरा मुख्य अभिभावक app.component.html . है

  <app-navbar></app-navbar>
  <app-stepper></app-stepper>
  <app-test></app-test>
2
Pravin Mishra 19 जून 2020, 10:36

3 जवाब

सबसे बढ़िया उत्तर

आप app-navbar में एक ईवेंट एमिटर सेट कर सकते हैं जो तब निकलता है जब + बटन क्लिक किया गया है। फिर इस इवेंट को एक app-stepper शो/छुपा टॉगलर से बांधें।

Navbar.component.ts

export class NavbarComponent {
  @Output() onPlusClick = new EventEmitter<boolean>();

  plusClick() {
    ...
    this.onPlusClick.emit(true);
  }
}

Navbar.component.html

<button (mouseup)="plusClick()">+</button>
...

App.component.ts

export class AppComponent {
  toggleStepper = false;
  ...
}

App.component.html

<app-navbar (onPlusClick)="toggleStepper = !toggleStepper"></app-navbar>
<app-stepper *ngIf="toggleStepper"></app-stepper>

यहां मैं app-stepper को हर बार टॉगल करता हूं + को onPlusClicked एमिटर द्वारा उत्सर्जित घटना की परवाह किए बिना क्लिक किया जाता है। यदि आप toggleStepper को सीधे उत्सर्जित घटना से बांधना चाहते हैं, तो आप navbar घटक में सही बूलियन उत्सर्जित करके और इसे सीधे toggleStepper चर में निर्दिष्ट करके ऐसा कर सकते हैं।

Navbar.component.ts

plusClicked() {
  this.onPlusClicked.emit(true);
  // or `this.onPlusClicked.emit(false)` based on some condition 
}

App.component.html

<!-- here the `event$` is either `true` or `false` -->
<app-navbar (onPlusClick)="toggleStepper = $event"></app-navbar>
<app-stepper *ngIf="toggleStepper"></app-stepper>
1
Michael D 19 जून 2020, 10:53

आप एक साझा सेवा बना सकते हैं जिसे <app> और <app-navbar> दोनों में इंजेक्ट किया गया है

सेवा कुछ इस तरह दिखेगी:

@Injectable({
  providedIn: 'root',
})
export class SharedService{

  public showStepper: boolean = false;
}

इसमें एक बूलियन है जो कहता है कि स्टेपर दिखाया जाना चाहिए या नहीं।

<app-navbar> के अंदर, जब उपयोगकर्ता '+' पर क्लिक करता है, तो showStepper को true पर सेट करें।

इसके बाद, <app> के अंदर, एक सार्वजनिक संपत्ति बनाएं जो इस तरह सेवा के अंदर showStepper का मान लौटाए:

public get showStepper(): boolean {
    return this._sharedService.showStepper;
    // _sharedService is the injected Service
}

और अब <app.component.html> के अंदर, *ngIf directive का उपयोग सशर्त रूप से अपने स्टेपर घटक को दिखाने के लिए करें:

<app-stepper *ngIf="showStepper"></app-stepper>

1
Mike S. 19 जून 2020, 10:48

आप इसे इस स्टैकब्लिज़ में दिखाए अनुसार हासिल कर सकते हैं।

आपको नेवबार घटक में एक आउटपुट चर का उपयोग करने और + बटन क्लिक पर एक मान उत्सर्जित करने की आवश्यकता है। app component में, आपको नेवबार घटक द्वारा उत्सर्जित ईवेंट को देखना होगा और stepper component को दिखाने या छिपाने के लिए उस ईवेंट मान का उपयोग करना होगा।

0
Harish 19 जून 2020, 10:59