Question

我有一个标题组件和注册组件以及一个登录组件。标头组件的选择器用于登录组件和注册组件。标题中有一个按钮。如果用户在url ... / registration中，它将显示为登录按钮。点击该按钮后，路线将变为登录

    else {
                    //Remove user id from list
                    list.remove(m.getid());
                    //Remove image path from list
                    imagelist.remove(m.getThumbnailUrl());
                    //Remove all views from scrollview
                    inHorizontalScrollView.removeAllViews();
                    for (int j = 0; j < list.size(); j++)
                    {
                        li = (LayoutInflater) getContext()
                                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                        view = li.inflate(R.layout.sample, null);
                        final ImageView i = (ImageView) view.findViewById(R.id.image5);

                        i.setId(Integer.parseInt(list.get(j)));

                        Glide.with(getContext()).load(imagelist.get(j)).asBitmap().placeholder(R.drawable.profileicon).centerCrop().into(new BitmapImageViewTarget(i) {
                            @Override
                            protected void setResource(Bitmap resource) {
                                RoundedBitmapDrawable circularBitmapDrawable =
                                        RoundedBitmapDrawableFactory.create(view.getContext().getResources(), resource);
                                circularBitmapDrawable.setCircular(true);
                                i.setImageDrawable(circularBitmapDrawable);
                            }
                        });
                        //add stored views from list and imagelist
                        inHorizontalScrollView.addView(view);
                    }

当用户转到登录页面时，我想将该按钮更改为“注册”。如何从登录组件和注册组件控制该按钮。

Answer 1

我使用 @Input API完成了它。

<强> Boot.ts

import {Component,bind} from 'angular2/core';
import {ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
import {bootstrap}  from 'angular2/platform/browser';

import{ComponentOne} from 'src/cone';
import{ComponentTwo} from 'src/ctwo';

@Component({
  selector: 'my-app',
  template: `
    <h1>Component Router</h1>
    <nav>
    <hr>
      <a [routerLink]="['ComponentOne']">Login</a><hr/>
      <a [routerLink]="['ComponentTwo']">Registartion</a>
    </nav>
    <hr>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path:'/component-one', name: 'ComponentOne', component: ComponentOne useAsDefault:true},
  {path:'/component-two', name: 'ComponentTwo', component: ComponentTwo}
])
export class AppComponent { }

    bootstrap(AppComponent, [
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
    ]);

Login.ts或cone.ts

 import {Component,View,ViewChild} from 'angular2/core';
 import {HeaderCmp} from 'src/header';


 @Component({
    template: `

    <header text="Registration"></header>
    <hr>
    <h1>Login</h1>
    `,
    directives:[HeaderCmp] 
  })

  export class ComponentOne {

      constructor(){ 
             console.log("first component being called");
      }

  }

Registartion.ts或ctwo.ts

import {Component,View} from 'angular2/core';
 import {HeaderCmp} from 'src/header';

 @Component({
    template: `
    <header text="Login"></header>
    <h1>Registration </h1>
    `,
    directives:[HeaderCmp]
  })

  export class ComponentTwo{
    constructor(){

      console.log("Second component being called");
    }
  }

<强> Header.ts

import {Component,View,Input} from 'angular2/core';
 import {sharedService} from 'src/sharedService';

 @Component({
   selector:'header',
    template: `
    <h4>Header </h4>
    <button>{{text}}</button>
    `
  })

  export class HeaderCmp{
     @Input() text: string='myText';

      constructor(){
               console.log("Header being called");
      }

 }

<强> Working Demo

从父组件访问子组件

1 个答案: