কৌণিকের কোনও টেম্পলেটে কীভাবে ভেরিয়েবল ঘোষণা করবেন

Question

আমার কাছে নিম্নলিখিত টেমপ্লেট রয়েছে:

<div>
  <span>{{aVariable}}</span>
</div>

এবং এর সাথে শেষ করতে চাই:

<div "let a = aVariable">
  <span>{{a}}</span>
</div>

করার কোন উপায় আছে?

Comments

আবশ্যক / আবশ্যক ব্যবহারের কেস যেমন উদাহরণস্বরূপ একটি বাঁধাই পরামিতিটির নাম পরিবর্তন করতে চান তা জানতে আগ্রহী?

— এলডিজে

এটি কেবল ট্যাব [উপাদান] এর মতো কিছু পুনরাবৃত্তি প্রতিরোধ করার জন্য val ওভাল উদাহরণস্বরূপ। আমি জানি যে আমি উপাদানটিতে সমস্যাটি সমাধান করতে পারি তবে আমি কেবল টেমপ্লেটে কীভাবে করব তা দেখছিলাম (যদিও আমি সেই সমাধানটি শেষ নাও করতে পারি)।

— স্কিপিয়ন

@ এলডিজে একটি নমুনা ব্যবহারের ক্ষেত্রে: দক্ষতা। স্ট্যাকব্লিটজ . com / angular / … <মাদুর-চেকবাক্স [চেক] = "বংশধর সবগুলি নির্বাচিত (নোড)" [অনির্দিষ্ট] = "বংশধর পার্টিক্যালসলেভড (নোড)" (পরিবর্তন) = "টোডে আইটেমস্লেলেশনটল (নোড)"> {{নোডের নমুনা ব্যবহার করুন। আইটেমটি}} </mat-checkbox> আসলে বংশধরগণত: নির্বাচিত () বংশধরগণকে সমস্ত নির্বাচিত () বলে। এর অর্থ হ'ল এককালের বংশধরগণসলেক্ট্রেটেডকে দু'বার বলা হয়। যদি স্থানীয় ভেরিয়েবল থাকে তবে এটি এড়ানো যেতে পারে।

— স্টিভেন.এক্সআই

<div *ngIf="{name:'john'} as user1; let user"> <i>{{user1|json}}</i> <i>{{user|json}}</i> </div>

— dasfdsa

@ ডাসফডসায় আমি বিশ্বাস করি user1 === user, এভাবে আপনি হয় *ngIf="{name:'john'} as user1বা ইয়ুরজুইয়ের উত্তর*ngIf="{name:'john'};let user হিসাবে করেন ।

— সিপিএইচপিথন

Answer 1

হালনাগাদ

আমরা কেবল *ngIfএটির মতো নির্দেশিকা তৈরি করতে এবং কল করতে পারি*ngVar

NG-var.directive.ts

@Directive({
    selector: '[ngVar]',
})
export class VarDirective {
  @Input()
  set ngVar(context: any) {
    this.context.$implicit = this.context.ngVar = context;
    this.updateView();
  }

  context: any = {};

  constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}

  updateView() {
    this.vcRef.clear();
    this.vcRef.createEmbeddedView(this.templateRef, this.context);
  }
}

এই *ngVarনির্দেশের সাহায্যে আমরা নিম্নলিখিতটি ব্যবহার করতে পারি

<div *ngVar="false as variable">
      <span>{{variable | json}}</span>
</div>

অথবা

<div *ngVar="false; let variable">
    <span>{{variable | json}}</span>
</div>

অথবা

<div *ngVar="45 as variable">
    <span>{{variable | json}}</span>
</div>

অথবা

<div *ngVar="{ x: 4 } as variable">
    <span>{{variable | json}}</span>
</div>

প্লাঙ্কার উদাহরণ Angular4 ngVar

আরো দেখুন

• কৌণিক 4 কোথায় "এনজিআইফের জন্য" স্থানীয়-বর্ণ "আচরণের সংজ্ঞা দেয়?

আসল উত্তর

কৌণিক v4

1) div+ ngIf+let

<div *ngIf="{ a: 1, b: 2 }; let variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
</div>

2) div+ ngIf+as

দৃশ্য

<div *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
  <span>{{variable.c}}</span>
</div>

component.ts

export class AppComponent {
  x = 5;
}

৩) আপনি divব্যবহার করতে পারেন এমন মোড়ক তৈরি করতে না চাইলেng-container

দৃশ্য

<ng-container *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">
  <span>{{variable.a}}</span>
  <span>{{variable.b}}</span>
  <span>{{variable.c}}</span>
</ng-container>

যেমন @ কিথ মন্তব্যগুলিতে উল্লেখ করেছে

এটি বেশিরভাগ ক্ষেত্রে কাজ করবে তবে এটি সাধারণ সমাধান নয় কারণ এটি পরিবর্তনশীল সত্যবাদী হওয়ার উপর নির্ভর করে

অন্য পদ্ধতির জন্য আপডেট দেখুন।

Comments

এটি বেশিরভাগ ক্ষেত্রে কাজ করবে তবে এটি সাধারণ সমাধান নয় কারণ এটি variableসত্যবাদী হওয়ার উপর নির্ভর করে

— কীথ

@ কীথ এটি নির্দেশ করার জন্য ধন্যবাদ। আপনি আমার আপডেট হওয়া উত্তরটি একবার দেখে নিতে পারেন

— yurzui

এটি নতুন উত্তর হওয়া উচিত কারণ এটি 1) অন্যান্য সমাধানের চেয়ে আরও আধুনিক 2) বর্তমান উত্তরের সাথে সংযুক্ত পুলের অনুরোধগুলি সংক্ষিপ্ত করে এবং অনেক সময় সাশ্রয় করে 3) বাইরের লিঙ্কের পরিবর্তে উদাহরণগুলি ইনলাইন অন্তর্ভুক্ত করে। এটি দেখানোর জন্য ধন্যবাদ। {}এএফআইকে যে কোনও বস্তু মোড়ানো সত্যের পক্ষে মূল্যায়ন করবে, সুতরাং এই সমাধানটি যথেষ্ট শক্ত ust

— kvanberendonck

উদাহরণস্বরূপ, বিস্তারযোগ্য button: *ngIf="{ expanded: false } as scope"এবং তারপর আপনি বুটস্ট্র্যাপ ব্যবহার করছেন আপনি শুধু ব্যবহার করতে পারেন [ngClass]="{ 'in': scope.expanded }"এবং (click)="scope.expanded = !scope.expanded"পরিবর্তে আপনার কিছু যোগ করার js/ tsফাইল।

— kvanberendonck

সম্পর্কিত গিতুব ইস্যু ( *ngIfকাস্টম এনজিভার স্টাফের পরিবর্তে সাধারণ ব্যবহার করে নির্দেশ করুন): github.com/angular/angular/issues/14985

— phil294

Answer 2

কুরুচিপূর্ণ, কিন্তু:

<div *ngFor="let a of [aVariable]">
  <span>{{a}}</span>
</div>

যখন অ্যাসিঙ্ক পাইপ ব্যবহার করা হয়:

<div *ngFor="let a of [aVariable | async]">
  <span>{{a.prop1}}</span>
  <span>{{a.prop2}}</span>
</div>

Comments

এটাই আমি সহজাত সঙ্গে নিয়ে এসেছি - এটি *ngFor="let a of [(someStream$ | async).someA]পাশাপাশি কাজ করে । আমার ধারণা <ng-container>এটির সাথে ব্যবহৃত এটি কাজটি বেশ সঠিকভাবে পরিবেশন করে!

— অ্যাঞ্জেলোস পিকৌলাস

এর ক্ষেত্রে *ngFor, মনে রাখবেন যে ভেরিয়েবলের মান পরিবর্তিত হলে সমস্ত নেস্টেড সামগ্রী পুনরায় তৈরি করা হবে, যতক্ষণ না আপনি কোনও trackByফাংশন নির্দিষ্ট করেন যা সমস্ত মানের জন্য একই আইডি ফেরত দেয়।

— ভ্যালেরি কাটকভ

Answer 3

আপনি templateকৌণিক 2 বা ng-templateকৌণিক 4+ তে একটি উপাদান ব্যবহার করে এইচটিএমএল কোডে ভেরিয়েবলগুলি ঘোষণা করতে পারেন ।

টেমপ্লেটগুলির একটি প্রসঙ্গ বিষয়বস্তু রয়েছে যার বৈশিষ্ট্যগুলি letবাঁধাইয়ের সিনট্যাক্স ব্যবহার করে চলকগুলিতে বরাদ্দ করা যেতে পারে । নোট করুন যে আপনাকে অবশ্যই টেমপ্লেটের জন্য একটি আউটলেট নির্দিষ্ট করতে হবে, তবে এটি নিজেই একটি রেফারেন্স হতে পারে।

<ng-template let-a="aVariable" [ngTemplateOutletContext]="{ aVariable: 123 }" [ngTemplateOutlet]="selfie" #selfie>
  <div>
    <span>{{a}}</span>
  </div>
</ng-template>

<!-- Output
<div>
  <span>123</span>
</div>
-->

আপনি $implicitএকটি কাস্টম সম্পত্তির পরিবর্তে প্রসঙ্গের অবজেক্টের সম্পত্তি ব্যবহার করে কোডের পরিমাণ হ্রাস করতে পারেন ।

<ng-template let-a [ngTemplateOutletContext]="{ $implicit: 123 }" [ngTemplateOutlet]="t" #t>
  <div>
    <span>{{a}}</span>
  </div>
</ng-template>

প্রসঙ্গ অবজেক্টটি আক্ষরিক বস্তু বা অন্য কোনও বাঁধাইয়ের মত প্রকাশ হতে পারে। এমনকি বন্ধনী দ্বারা বেষ্টিত যখন পাইপগুলি কাজ করে বলে মনে হয়।

এর বৈধ উদাহরণ ngTemplateOutletContext:

• [ngTemplateOutletContext]="{ aVariable: 123 }"
• [ngTemplateOutletContext]="{ aVariable: (3.141592 | number:'3.1-5') }"
• [ngTemplateOutletContext]="{ aVariable: anotherVariable }" সাথে ব্যবহার করো let-a="aVariable"
• [ngTemplateOutletContext]="{ $implicit: anotherVariable }" সাথে ব্যবহার করো let-a
• [ngTemplateOutletContext]="ctx"ctxএকটি সরকারী সম্পত্তি যেখানে

Comments

এটি কাজ করতে আমাকে আপনার কোডটি '<টেমপ্লেট ...' থেকে '<এনজি-টেম্পলেট ...' এ পরিবর্তন করতে হয়েছিল।

— হাম্পাকারিজিট

হ্যাঁ, আপনি কেবল <template>কৌনিক 2 এ ব্যবহার করতে পারেন আপনি হয় <template>বা <ng-template>কৌণিক 4 এ ব্যবহার করতে পারেন তবে আপনার কেবল ব্যবহার করা উচিত <ng-template>। কৌণিক 5 এর জন্য সমর্থন বাদ দিয়েছে <template>।

— স্টিভেন লাইকেন্স 14

কিসের tজন্য?

— ম্যাটটিএম

@ ম্যাটটিএম #tএকটি টেম্পলেট ভেরিয়েবল যা সঞ্চয় করে ng-template। এটি [ngTemplateOutlet]="t"এনজি-টেম্পলেটটি নিজেই রেফারেন্স তৈরি করতে ব্যবহৃত হয়।

— স্টিভেন লাইকেন্স

এটি বিজারে, তবে এটি কার্যকর! কৌণিকটি বিল্ট-ইন ভেরিয়েবল নির্দেশ সহ এটিকে আরও সহজ করা উচিত। ধন্যবাদ।

— তেত্রদেব

Answer 4

আপডেট 3

2451 ইস্যুটি কৌণিক 4.0.0.0 এ স্থির করা হয়েছে

আরো দেখুন

• https://github.com/angular/angular/pull/13297
• https://github.com/angular/angular/commit/b4db73d
• https://github.com/angular/angular/issues/13061

আপডেট 2

এটি সমর্থিত নয়।

এখানে টেমপ্লেট ভেরিয়েবল রয়েছে তবে এটি স্বেচ্ছাচারিত মান নির্ধারণের জন্য সমর্থিত নয়। এগুলি কেবল তাদের প্রয়োগ করা উপাদানগুলিকে বোঝাতে ব্যবহার করা যেতে পারে, কাঠামোগত নির্দেশের জন্য নির্দেশাবলী বা উপাদানগুলির রপ্তানি করা নাম এবং স্কোপ ভেরিয়েবলগুলি ngFor,

Https://github.com/angular/angular/issues/2451 এও দেখুন

আপডেট 1

@Directive({
  selector: '[var]',
  exportAs: 'var'
})
class VarDirective {
  @Input() var:any;
}

এবং এটি পছন্দ মত আরম্ভ

<div #aVariable="var" var="abc"></div>

অথবা

<div #aVariable="var" [var]="'abc'"></div>

এবং মত চলক ব্যবহার

<div>{{aVariable.var}}</div>

(পরীক্ষিত না)

• #aVariableVarDirective( exportAs: 'var') একটি রেফারেন্স তৈরি করে
• var="abc"ইনস্ট্যান্ট করে VarDirectiveএবং স্ট্রিংয়ের মানটিকে "abc"তার মান ইনপুটটিতে পাস করে ।
• aVariable.varনির্ধারিত মান সার্চ varনির্দেশনা varইনপুট।

Comments

এটি করার জন্য কোনও কাঠামোগত দিকনির্দেশনা তৈরি করা সম্ভব হবে না?

— স্কিপিয়ন

আপনার যদি বারবার এটির প্রয়োজন হয় তবে কোনও নির্দেশিকা আপনার যা ইচ্ছা তা করতে পারে। একটি কাঠামোগত দিকনির্দেশনা এটি নিজস্ব দৃষ্টিভঙ্গি তৈরি করে, এটি সম্ভবত আপনি চান না।

— গন্টার জ্যাচবাউর

@ গন্টেরজ্যাচবাউয়ার, খুব ভাল স্টাফ আমি জানি যে component.tsফাইলটিতে ভেরিয়েবল গণনা করা / প্রস্তুত করা সম্ভবত এটির চেয়ে ভাল অনুশীলন । তবে একটি সিঙ্কিং স্কিমের কারণে আমি আমার অ্যাপ্লিকেশন জুড়ে প্রয়োগ করছি তার জন্য কিছু ক্ষেত্রে তাদের দৃষ্টিভঙ্গি রাখাই আমার পক্ষে এত সহজ। আমি যখন জাভাস্ক্রিপ্ট রেফারেন্স নিয়মের সুবিধা নিচ্ছি যখন বিভিন্ন ভেরিয়েবল একই বস্তুতে নির্দেশ করে।

— AmmarCSE

আমি এর মতো একটি ত্রুটি পাচ্ছি There is no directive with "exportAs" set to "var"। কেউ কি দয়া করে আমাকে বলতে পারেন আমি কী ভুল করেছি? আমি উপরের নির্দেশটি ব্যবহার করেছি।

— পার্থ সারথি ঘোষ

সম্ভবত আপনাকে নির্দেশ না জুড়ে declarations: [...]এর @NgModule()। যদি এটি সমস্যা না হয় তবে দয়া করে একটি নতুন প্রশ্ন তৈরি করুন এবং কোডটি সরবরাহ করুন যা সমস্যাটি সনাক্ত করতে দেয়।

— গন্টার জ্যাচবাউয়ার

Answer 5

আমি এটি প্রস্তাব করব: https://medium.com/@AustinMatherne/angular-let-directive-a168d4248138

এই নির্দেশিকা আপনাকে এমন কিছু লেখার অনুমতি দেয়:

<div *ngLet="'myVal' as myVar">
  <span> {{ myVar }} </span>
</div>

Comments

এর মতো তবে * কাঠামোগত দিকনির্দেশনার জন্য সংরক্ষিত যা এটি নয় তবে +1

— danday74

Answer 6

আমি এখানে একটি নির্দেশিকা লিখেছি যা রফতানির সাজসজ্জার প্যারামিটার ব্যবহারের প্রসারিত হয় এবং আপনাকে স্থানীয় ভেরিয়েবল হিসাবে অভিধান ব্যবহার করতে দেয়।

import { Directive, Input } from "@angular/core";
@Directive({
    selector:"[localVariables]",
    exportAs:"localVariables"
})
export class LocalVariables {
    @Input("localVariables") set localVariables( struct: any ) {
        if ( typeof struct === "object" ) {
            for( var variableName in struct ) {
                this[variableName] = struct[variableName];
            }
        }
    }
    constructor( ) {
    }
}

আপনি এটি কোনও টেমপ্লেটে নিম্নলিখিত হিসাবে ব্যবহার করতে পারেন:

<div #local="localVariables" [localVariables]="{a: 1, b: 2, c: 3+2}">
   <span>a = {{local.a}}</span>
   <span>b = {{local.b}}</span>
   <span>c = {{local.c}}</span>
</div>

অবশ্যই # স্থানীয় কোনও বৈধ স্থানীয় পরিবর্তনশীল নাম হতে পারে।

Comments

'প্রোডাকশন' বিল্ডটি যেমন হয় তেমন পাস করে না (আইডিই দ্বারা ত্রুটি হিসাবেও দেখায়)। যোগ [key: string]: any;করার জন্য Classএই সমস্যা এড়ানোর জন্য।

— চার্লি 21

Answer 7

আপনি যদি কোনও ফাংশনের প্রতিক্রিয়া পেতে এবং এটিকে একটি ভেরিয়েবলের মধ্যে সেট করতে চান তবে আপনি টেমপ্লেটে ng-containerপরিবর্তনটি এড়ানোর জন্য এটি টেমপ্লেটে নীচের মতো ব্যবহার করতে পারেন ।

<ng-container *ngIf="methodName(parameters) as respObject">
  {{respObject.name}}
</ng-container>

এবং উপাদান উপাদান পদ্ধতি কিছু হতে পারে

methodName(parameters: any): any {
  return {name: 'Test name'};
}

Answer 8

আপনার যদি কৌনিক ভাষা পরিষেবা থেকে আপনার টেম্পলেটগুলির মধ্যে থেকে স্ব-পরিপূর্ণ সমর্থন প্রয়োজন হয় :

সমলয়:

myVar = { hello: '' };

<ng-container *ngIf="myVar; let var;">
  {{var.hello}}
</ng-container>

অ্যাসিঙ্ক পাইপ ব্যবহার:

myVar$ = of({ hello: '' });

<ng-container *ngIf="myVar$ | async; let var;">
  {{var.hello}}
</ng-container>

Answer 9

এটি অনেক সহজ, অতিরিক্ত কোনও কিছুর প্রয়োজন নেই। আমার উদাহরণে আমি ভেরিয়েবলটিকে "ওপেন" ঘোষণা করি এবং তারপরে এটি ব্যবহার করি।

   <mat-accordion class="accord-align" #open>
      <mat-expansion-panel hideToggle="true" (opened)="open.value=true" (closed)="open.value=false">
        <mat-expansion-panel-header>
          <span class="accord-title">Review Policy Summary</span>
          <span class="spacer"></span>
          <a *ngIf="!open.value" class="f-accent">SHOW</a>
          <a *ngIf="open.value" class="f-accent">HIDE</a>
        </mat-expansion-panel-header>
        <mat-divider></mat-divider>
        <!-- Quote Details Component -->
        <quote-details [quote]="quote"></quote-details>
      </mat-expansion-panel>
    </mat-accordion>

Comments

আপনি একটি ট্যাগের নাম দিচ্ছেন, এটি ভেরিয়েবল ঘোষণা করছে না

— আমিররেজা

আমিররেজা, সুনির্দিষ্টভাবে বলতে আমি একটি মান অস্থায়ী করতে এলিমেন্টরিফ ব্যবহার করছি।

— জ্যাক রস

অসাধারণ! আমাকে ব্যবহার করতে হয়েছিল "?"কারণ আমার কাছে "সনাক্তকারী" মানটি "এই ধরণের =>" উন্মুক্ত?। মূল্য "হিসাবে সংজ্ঞায়িত করা হয়নি তবে এটি কাজ করছে !!

— এ। মোরেল

Answer 10

আমি কৌনিক 6x ব্যবহার করছি এবং নীচে স্নিপেট ব্যবহার করে শেষ করেছি। আমি এমন একটি দৃশ্যাবলী করেছি যেখানে আমাকে কোনও টাস্ক অবজেক্ট থেকে ব্যবহারকারী খুঁজে পেতে হবে। এটিতে ব্যবহারকারীদের অ্যারে রয়েছে তবে আমি নিযুক্ত ব্যবহারকারী বেছে নিতে পারি।

<ng-container *ngTemplateOutlet="memberTemplate; context:{o: getAssignee(task) }">
</ng-container>
<ng-template #memberTemplate let-user="o">
  <ng-container *ngIf="user">
    <div class="d-flex flex-row-reverse">
      <span class="image-block">
        <ngx-avatar placement="left" ngbTooltip="{{user.firstName}} {{user.lastName}}" class="task-assigned" value="28%" [src]="user.googleId" size="32"></ngx-avatar>
      </span>
    </div>
  </ng-container>
</ng-template>

Answer 11

আমি এটি করার জন্য একটি নির্দেশিকা তৈরি করার পদ্ধতিকে পছন্দ করেছি (@ ইউরজুইকে ভাল কল)।

আমি একটি মাঝারি নিবন্ধটি কৌনিক "লেট" নির্দেশকটি খুঁজে পেয়েছি যা এই সমস্যাটিকে সুন্দরভাবে ব্যাখ্যা করে এবং একটি স্বনির্ধারিত নির্দেশের প্রস্তাব দেয় যা সর্বনিম্ন কোড পরিবর্তনগুলির সাথে আমার ব্যবহারের ক্ষেত্রে দুর্দান্ত কাজ করে।

আমার সংশোধনগুলি সহ এখানে সংক্ষিপ্তসার (পোস্ট করার সময়):

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

interface LetContext <T> {
  appLet: T | null
}

@Directive({
  selector: '[appLet]',
})
export class LetDirective <T> {
  private _context: LetContext <T> = { appLet: null }

  constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef <LetContext <T> >) {
    _viewContainer.createEmbeddedView(_templateRef, this._context)
  }

  @Input()
  set appLet(value: T) {
    this._context.appLet = value
  }
}

আমার প্রধান পরিবর্তনগুলি হ'ল:

• 'এনজি' থেকে 'অ্যাপ' এ উপসর্গটি পরিবর্তন করা (আপনার অ্যাপ্লিকেশনটির কাস্টম উপসর্গ যা ব্যবহার করা উচিত)
• পরিবর্তন appLet: T করার জন্যappLet: T | null

কেন নিশ্চিত নয় যে কেন কৌণিক দলটি কেবল একটি আনুষ্ঠানিক এনজিলেট নির্দেশিকা তৈরি করে নি তবে whetvs করেছে।

আসল উত্স কোড ক্রেডিট @ অস্টিনমথ্রনে যায়

Comments

এটি পৃষ্ঠায় আমার প্রিয় পদ্ধতির ছিল এবং এটি আমার পক্ষে কাজ করেছিল।

— স্কাইচান

Answer 12

সংক্ষিপ্ত উত্তর যা কাউকে সহায়তা করে

• টেম্পলেট রেফারেন্স পরিবর্তনশীল প্রায়শই একটি টেম্পলেট মধ্যে DOM উপাদান রেফারেন্স।
• কৌণিক বা ওয়েব উপাদান এবং নির্দেশের জন্যও রেফারেন্স।
• এর অর্থ আপনি কোনও টেমপ্লেটের যে কোনও জায়গায় সহজেই পরিবর্তনশীল অ্যাক্সেস করতে পারবেন

• হ্যাশ প্রতীক (#) ব্যবহার করে রেফারেন্স ভেরিয়েবল ঘোষণা করুন
• কোনও ইভেন্টের প্যারামিটার হিসাবে কোনও ভেরিয়েবল পাস করতে সক্ষম

  show(lastName: HTMLInputElement){
    this.fullName = this.nameInputRef.nativeElement.value + ' ' + lastName.value;
    this.ctx.fullName = this.fullName;
  }

* তবে আপনি নিজের উপাদানটির অভ্যন্তরে এটি রেফারেন্স করতে ভিউচিল্ড ডেকোরেটর ব্যবহার করতে পারেন।

import {ViewChild, ElementRef} from '@angular/core';

কম্পোনেন্টের ভিতরে ফার্স্টনেম ইনপুট ভেরিয়েবলটি উল্লেখ করুন

@ViewChild('firstNameInput') nameInputRef: ElementRef;

এর পরে, আপনি নিজের উপাদানগুলির ভিতরে যেকোন জায়গায় এই.নামপরিচয়টি ব্যবহার করতে পারেন।

এনজি-টেমপ্লেট নিয়ে কাজ করা

এনজি-টেমপ্লেটের ক্ষেত্রে এটি কিছুটা আলাদা কারণ প্রতিটি টেমপ্লেটের নিজস্ব ইনপুট ভেরিয়েবলগুলির সেট থাকে।

https://stackblitz.com/edit/angular-2-template-reference-variable

Answer 13

যারা প্রতিস্থাপন হিসাবে কাঠামোগত নির্দেশকে ব্যবহার করার সিদ্ধান্ত নিয়েছেন, তাদের *ngIfমনে রাখবেন যে নির্দেশিকা প্রসঙ্গে ডিফল্টরূপে পরীক্ষা করা হয়নি। কোনও প্রকার নিরাপদ নির্দেশমূলক ngTemplateContextGuardসম্পত্তি যুক্ত করতে হলে নির্দেশকের প্রসঙ্গে টাইপ করা দেখুন । উদাহরণ স্বরূপ:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
    // don't use 'ng' prefix since it's reserved for Angular
    selector: '[appVar]',
})
export class VarDirective<T = unknown> {
    // https://angular.io/guide/structural-directives#typing-the-directives-context
    static ngTemplateContextGuard<T>(dir: VarDirective<T>, ctx: any): ctx is Context<T> {
        return true;
    }

    private context?: Context<T>;

    constructor(
        private vcRef: ViewContainerRef,
        private templateRef: TemplateRef<Context<T>>
    ) {}

    @Input()
    set appVar(value: T) {
        if (this.context) {
            this.context.appVar = value;
        } else {
            this.context = { appVar: value };
            this.vcRef.createEmbeddedView(this.templateRef, this.context);
        }
    }
}

interface Context<T> {
    appVar: T;
}

নির্দেশটি ঠিক যেমন ব্যবহার করা যায় *ngIf, এটি মিথ্যা মানগুলি সঞ্চয় করতে পারে তা বাদে :

<ng-container *appVar="false as value">{{value}}</ng-container>

<!-- error: User doesn't have `nam` property-->
<ng-container *appVar="user as user">{{user.nam}}</ng-container>

<ng-container *appVar="user$ | async as user">{{user.name}}</ng-container>

তুলনায় একমাত্র ত্রুটি এই *ngIfযে কৌনিক ভাষা পরিষেবা ভেরিয়েবল টাইপটি বের করতে পারে না সুতরাং টেমপ্লেটগুলিতে কোনও কোড সমাপ্তি নেই। আশা করি শিগগিরই এটি ঠিক হয়ে যাবে।