Question

amountcomponent.component.ts

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";

const testLink = ({match}) => {
    console.log(match.url)
    return (<h1>Teste {match.params.username} </h1>)
}

class Sponnsor extends Component {
    render() {
        return (
            <Router>
              <Route path="/test/:username" component={testLink} />
            </Router>
            

        );
    }
}

amountcomponent.html

import React, { Component } from 'react';

class CustomComponent extends Component {
    render() {
        return (
            RESULT OF MY PATH
        );
    }
}

export default CustomComponent;

dobcomponent.component.ts

import { Component,Input,OnInit} from '@angular/core';
@Component({
    selector: 'appchild',
    templateUrl: './amountcomponent.component.html'


})
export class AmountComponent implements OnInit{

    @Input() greetMessage: string ;


    onKey(event: any) {
        console.log(event.target.value)

    }
    ngOnInit(){

    }


}

}

dobcomponent.html

<input (keyup)="onKey($event)">
<h2>{{greetMessage}}</h2>

如何将值从Dob Component传递给Amount组件。我不知道如何通过它。所以请帮我做。

Answer 1

我认为你需要一个输出。 https://angular.io/guide/template-syntax#declaring-input-and-output-properties

（金额组件=孩子）

<强> amountcomponent.html

<input #amountInput (keyup)="onKey(amountInput.value)">
<h2>{{greetMessage}}</h2>

<强> amountcomponent.component.ts

export class AmountComponent implements OnInit{

    @Input() greetMessage: string;
    @Output() amountChange = new EventEmitter<string>();

    onKey(amount: string) {
        console.log(amount)
        this.amountChange.emit(amount);
    }
}

（Dob组件=父母）

<强> dobcomponent.html

<input (keyup)="onquantity($event)">
<appchild [greetMessage]="childmessage" 
          (amountChange)="onAmountChange($event)"></appchild>

<强> dobcomponent.component.ts

export class DoBComponent {
    public quantity:any;
    childmessage : string = "I am passed from Parent to child component"

    onquantity(event: any) {
        this.quantity = event.target.value
        console.log(this.quantity)
    }

    onAmountChange(amount: string) {
        console.log("new amount is", amount);
    }
}

如何将值从Dob Component传递给Amount组件

1 个答案: