如何在 Angular 中的另一个组件中使用变量

Question

I have two component. .

Now I want to use master-component variable into alert component.

But without import it because in master-component I have already import alert-component.

And again if I try to import master-component into alert-component then it will throw circular dependency error.

So I want to access variable of master-component into alert-component without import it.

So its possible?

Answer 1

You could use an @Input() variable for your alert component and forward it within your master component. In the Master Component's template, inject the alert component and forward the input with square brackets:

// master.component.html
...
    <alert-component [alertInput1]="masterVariable1"></alert-component>
...

In the master component's controller, have the variable defined, that you want to forward to the child component:

// master.component.ts
{
    ...
    public masterVariable1: string = "test content from master";
    ...
}

In the child component's controller, define the input variable:

// alert.component.ts
{
    ...
    @Input() alertInput1: string = undefined; // alertInput1 will get the value "test content from master"
    ...
}

Further reading about input/output binding between parent and child components: https://angular.io/guide/inputs-outputs

Update : If your alert component is no child of the master component, then a service can be used to share data between them.

Here is the implementation of a new service, that holds a boolean variable inside an BehaviourSubject:

// share-service.ts
@Injectable()
export class ShareService {

    public isValid$: BehaviourSubject<boolean> = new BehaviourSubject<boolean>(false);

    constructor() {}

    public setValid(value: boolean): void {
        this.isValid$.next(value);
    }
}

I did not get, if your MasterComponent shall forward the data to the AlertComponent or vide versa, so in the following example, the MasterComponent updates the isValid of the ShareService, and the AlertComponent receives it.

Now, the master component can inject the service and update the value for the behavioursubject. For showcase, I update it inside the OnInit method, but you can use it anywhere, where suitable:

// master.component.ts
export class MasterComponent implements OnInit {
    constructor(private shareService: ShareService) {}

    ngOnInit(): void {
        this.shareService.setValid(true); // update valid to true
    }
}

Now, the AlertComponent can also inject the same service and listen on the behaviourSubject for updates:

// alert.component.ts
export class AlertComponent implements OnInit {
    constructor(private shareService: ShareService) {}

    public ngOnInit(): void {
        this.shareService.isValid$.subscribe(isValid => {
            if (isValid) {
                // insert code for isValid === true
            } else {
                // insert code for isValid === false
            }
        });
    }
}